场景:复选框勾选
<div id="app" style="margin: 10px;">
<van-checkbox v-for="box in checkboxes" :key="box.id" v-model="box.selected">
复选框 {
{ box.title }}
</van-checkbox>
</div>
new Vue({
el: '#app',
data () {
return {
checkboxes: [
{
id: 1, title: 'a' },
{
id: 2, title: 'b' },
{
id: 3, title: 'c' }
]
}
},
created () {
this.checkboxes[0].selected = true
}
})
结果:
点击不能成功地切换选中状态,而在点击之后再点击其他复选框,才会“有延迟地”切换状态,反正就是没有按照预期。
原因:
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
所以不要直接在JS中操作一个Vue data对象中不存在的属性,如果同时有通过v-model绑定到该对象的不存在的属性时,会出现诡异的行为表现,console中不会报出任何 warn 或 error。
解决方式:
在 data 中添加 selected 属性,即使初值为undefined或者null,也能够让 Vue 正确识别所有对象属性。
data () {
return {
checkboxes: [
{
id: 1, title: 'a', selected: undefined },
{
id: 2, title: 'b', selected: undefined },
{
id: 3, title: 'c', selected: undefined }
]
}
}