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

【问题标题】：Vue v-bind checkbox to element inside of array not workingVue v-bind复选框到数组内部的元素不起作用
【发布时间】：2019-09-02 07:46:40
【问题描述】：

我正在使用 Vuetify 复选框（我认为这无关紧要，这可能是由 Vue 本身引起的），并试图获取一个带有 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-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

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

【问题讨论】：

是的，数组中的反应性很棘手。如果您需要使用数组，有一些方法可以绕过它。

标签： javascript vue.js vuejs2 vuetify.js

【解决方案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]
    }
  }
})

这将触发反应。

我建议阅读 vue 文档中的 this reactivity page，其中解释了原因和方法。

【讨论】：

很好的答案，尤其包括 vues 反应性页面

【解决方案2】：

对于纯javascript修复，不需要vues内部，你可以复制数组，更新你想要的值然后重置selected：

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

这将触发 vues 内部反应以相应地更新模板和数据

【讨论】：