javascript - Vue v-bind 复选框到数组内部的元素不起作用

Question

我正在使用 Vuetify 复选框(我认为这不相关，这可能是由 Vue 本身引起的)，并尝试获取带有 true、false 值数组的复选框双重绑定(bind)数组。通过控制每个元素的真/假值，我想控制复选框的检查状态。以下是 fiddle 中适用于单个元素的示例代码:

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-model 值放入数组中时:html:

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

脚本:

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

它不再工作了:https://jsfiddle.net/ziranshu/evsatguy/20

我想不出绑定(bind)数组元素和绑定(bind)单个值之间有什么区别。谁能解释一下，并建议如何解决这个问题？

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]
    }
  }
})

用途:

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]
    }
  }
})

这将触发 react 。

我建议阅读this reactivity page来自 vue 文档，它解释了原因和方式。