我正在使用 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)单个值之间有什么区别。谁能解释一下,并建议如何解决这个问题?
最佳答案
问题是您需要使用 $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 文档,它解释了原因和方式。
关于javascript - Vue v-bind 复选框到数组内部的元素不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55636469/