How to make it in Vue.js so that when you click on a list item, it gets into the array (without the html input element) and sends an ajax request?

Question

Vue.js

Here is the dropdown without using the html input element. Here, when you click, everything is perfectly selected, but if you want to remove the selection by clicking again, then sometimes the wrong element in the array is deleted. And please help me set it up so that when the array, the selected elements, are changed, an AJAX request occurs. (As I understand it, whatch is needed? what is better to use here: vanilla ajax, fetch or axios?). Thanks in advance for your response and any constructive criticism.

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

When deleting splice, you must specify the index, not the element itself:

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

The checkedAll property must be evaluated, with a setter:

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 request <...> need watch?

It can be so, yes.

which is better to use

axios