Vuejs - v-модель с несколькими флажками

Question

У меня есть динамический список опций, который приходит из API:

       <tr v-for="(option, index) in options">
                <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="toggle" v-model="option.value" @click="toggleOption(option.id, index)">
                        <label class="custom-control-label" for="toggle">{{ option.value }}</label>
                </div>

Метод:

 toggleOption(id, index) {
            let app = this;
            let option = this.options[index];
            app.loading = true;
            option.value = !option.value;
            axios.patch('/apiendoint' + id, option)
                .then(function (resp) {
                    app.loading = false;
                })
                .catch(function (resp) {

                });
        }

Когда флажок установлен, все флажки изменяются, если из API работает только один элемент, все работает. Как заставить его работать с несколькими флажками?

Answer 1

Возможно, лучше использовать :value вместо v-model и вызывать свою функцию в методе @change, отправляя событие (используется для доступа к значению флажка) и параметр, который принадлежит этому флажку.

   <tr v-for="(option, index) in options">
            <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="toggle" :value="option.value" @change="toggleOption($event, option)">
                    <label class="custom-control-label" for="toggle">{{ option.value }}</label>
            </div>

А в методе вы получаете событие и опцию в качестве параметров. Затем вы можете получить доступ к значению и идентификатору опций, а также к значению флажка (набирается event.target.checked)

 toggleOption(event, option) {
            let app = this;
            app.loading = true;
            option.value = event.target.checked;
            axios.patch('/apiendoint' + option.id, option)
                .then(function (resp) {
                    app.loading = false;
                })
                .catch(function (resp) {

                });
        }

Причина использования @change в том, что иногда @input может быть запущен

Answer 2

Я создал базовый рабочий пример

new Vue({
  el: '#app',
  data: {
    loading: false,
    options: [
      {id: 1, value: true},
      {id: 2, value: true},
      {id: 3, value: true},
    ]      
  },
  methods: {
    /*
      instead of passing `id` and `index`, just pass `option`
    */
    toggleOption(option) {
      let app = this;
      
      app.loading = true;
      option.value = !option.value;

      // REMOVE NEXT LINE to send ajax
      return;

      axios.patch('/apiendoint/' + option.id, option)
        .then(function (resp) {
          app.loading = false;
        })
        .catch(function (resp) {});
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <table>
    <tr v-for="(option, index) in options">
      <td>
        <div class="custom-control custom-switch">
          <input
            :id="'toggle-'+option.id"
            type="checkbox"
            class="custom-control-input"
            v-model="option.value"
            @click="toggleOption(option)"
          >
          <label class="custom-control-label" :for="'toggle-'+option.id">
            {{ option.value }}
          </label>
        </div>
      </td>

    </tr>
  </table>
</div>