Как в Vue.js сделать чтобы по на нажатию на элемент списка он попадал в массив (без html элемента input) и отправлял ajax запрос?

Question

[Heretic Man]

Вот выпадающий список без использования html элемента input. Тут при нажатии все прекрасно выбирается, но если хочется убрать выделение повторным нажатием, то иногда удаляется не тот элемент в массиве. И помогите пожалуйста настроить так чтобы при изменении массива, выбранных элементов, происходил AJAX запрос. (Я так понял нужен whatch? что лучше использовать тут: ванильный ajax, fetch или axios?). Заранее благодарю за ответ и любую конструктивную критику.

CodePen: https://codepen.io/faridjan/pen/pYKRew

<div id="app">
   <div class="avia-filter__airline dropdown">
      <div class="dropdown__header" @click="openDropdown = !openDropdown">
         <span class="dropdown-arr dropdown__title">Авиакомпании</span>
      </div>
      <div class="dropdown__container check-list" :class="{_active: openDropdown}">
         <div class="check-list__item dropdown__option" :class="{_active: checkedAll}" @click="selectAll">Все</div>
         <div class="check-list__item dropdown__option" v-for="(airline, id) in airlines" :class="{_active: selected.includes(airline.name)}" @click="select(airline.name, id)">{{ airline.name }}</div>
      </div>
   </div>
</div>

let app = new Vue({
	el: '#app',
	data: {
		airlines: [
			{code: '11', name: 'Lorem 1'},
			{code: '22', name: 'Lorem 2'},
			{code: '33', name: 'Lorem 3'}
		],
		selected: [],
		openDropdown: false,
		checkedAll: false
	},
	methods: {
		selectAll() {
			this.selected = [];
			if (!this.checkedAll) {
				for (let i in this.airlines) {
					this.selected.push(this.airlines[i].name);
				}
			}
			this.checkedAll = !this.checkedAll
			console.log(this.checkedAll);
			console.log(this.selected);
		},
		select(airline, id) {
			console.log(this.selected.indexOf(airline));
			if(this.checkedAll) {
				this.checkedAll = false
			}
			if(this.selected.indexOf(airline) != -1) {
				this.selected.splice(airline, 1);
			} else {
				this.selected.push(airline);
			}
			console.log(this.selected);4
		}
	},
	watch: {
		selected: function(val, oldVal) {
			// AJAX Запрос
		}
	}
});

Answer 1

[0xD34F]

При удалении в splice надо указывать индекс, а не сам элемент:

methods: {
  select(airline) {
    const index = this.selected.indexOf(airline);
    if (index !== -1) {
      this.selected.splice(index, 1);
    } else {
      this.selected.push(airline);
    }
  },
},

Свойство checkedAll должно быть вычисляемым, с сеттером:

computed: {
  checkedAll: {
    get() {
      return this.airlines.every(n => this.selected.includes(n.name));
    },
    set(val) {
      this.selected = val ? this.airlines.map(n => n.name) : [];
    },
  },
},

AJAX запрос <...> нужен watch?

Можно так, да.

что лучше использовать

axios

Comments

[Heretic Man]

Что бы я без тебя делал?))
Вновь спасибо!