Флажок vue v-bind для элемента внутри массива не работает

Question

Я использую флажок Vuetify (который я не считаю релевантным, возможно, это связано с самим Vue), и пытаюсь получить массив двойного связывания флажка с массивом значений true, false.Управляя значением true / false каждого элемента, я хочу контролировать статус проверки флажка.Вот пример кода в скрипте, который работает с одним элементом:

HTML:

<v-checkbox v-model="selected" label="John">      </v-checkbox>
<v-btn @click="toggle">toggle</v-btn>

Сценарий:

toggle () {
    this.selected=!this.selected
    console.log(this.selected)
    }

Это работает: https://jsfiddle.net/ziranshu/evsatguy/12

Однако, когда я помещаю значения v-модели в массив: html:

<v-checkbox v-model="selected[0]" label="John">      </v-checkbox>
<v-btn @click="toggle(0)">toggle John</v-btn>

script:

toggle (index) {
    this.selected[index]=!this.selected[index]
    console.log(this.selected)
}

Это больше не работает: https://jsfiddle.net/ziranshu/evsatguy/20

Я не могу думать о какой-либо разнице между связыванием с элементом массива и связыванием с одним значением.Может кто-нибудь объяснить, и предложить, как это исправить?

Answer 1

Проблема в том, что вам нужно использовать метод $set, потому что вы имеете дело с массивом

вместо

new Vue({
  el: '#app',
  methods: {
    toggle (index) {
      this.selected[index]=!this.selected[index] // <== no-no for array
      console.log(this.selected)
    }
  },
  data() {
    return {
      selected: [false,false]
    }
  }
})

use:

new Vue({
  el: '#app',
  methods: {
    toggle (index) {
      this.$set(this.selected, index,!this.selected[index] ) // <== yes-yes for arrays and objects
      console.log(this.selected)
    }
  },
  data() {
    return {
      selected: [false,false]
    }
  }
})

это вызовет реактивность.

Я рекомендую прочитать эту страницу реактивности из справочной документации, которая объясняет, почему и как.

Answer 2

Для чисто javascript-исправления, без необходимости внутренних значений, вы можете скопировать массив, обновить желаемое значение, а затем сбросить selected:

toggle (index) {
  let selected = this.selected.slice(0)
  selected[index] = !selected[index]
  this.selected = selected
}

Это вызовет внутреннюю реактивность vues для обновления шаблона.и данные соответственно