v-model绑定data不存在的属性导致异常

场景：复选框勾选

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

第二种

使用this.$set()

const index = 1;
const item = { id: 1, title: 'a', selected: false };
this.$set(this.checkboxes, index, item);

第三种：适用于对象

对象除了上述两种方法，还可以通过Object.assign() 或 _.extend() 方法来添加属性，触发更新

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })