Question

我正在使用Vuetify复选框（我认为这不相关，这可能是由Vue本身引起的），并试图获取具有复选框true和false值的复选框double绑定数组。通过控制每个元素的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

我想不出绑定数组元素和绑定单个值之间的区别。谁能解释，并提出解决方法的建议？

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

这将触发反应。

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

Answer 2

要获得纯JavaScript修复，而无需内部vue，可以复制数组，更新所需的值，然后重置selected：

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

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

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

2 个答案: