vue+elementui复选框勾选失败使用vue.set_vue 复选框打不了勾是什么原因

vue+element-ui复选框勾选失败 使用vue.set()方法或他的别名this.$set()方法解决

问题现象
复选框勾选后无效果，但是数据已经更改。

//错误代码
    <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checks"  @change="toselect(scope.row,false)" ></el-checkbox>
        </template>

          //功能函数:选中部分子集
    toselect(arr, key) {
      arr.forEach((v, i) => {
        v.checks = key；
      });
    },
1
2
3
4
5
6
7
8
9
10
11

问题分析
1.首先查看复选框的数据是否更改改了
2.如果数据更改了那么就是vue数据监听不到数据的变化（就是数据没有被双向绑定）
解决方案
使用vue.set()方法或他的别名this.$set()方法解决this.$set(v, ‘checks’, key);
v 数据对象（目标）
checks 是v中的属性新增或更新
key 是你要更改或新增的值

    //功能函数:选中部分子集
    toselect(arr, key) {
      arr.forEach((v, i) => {
        this.$set(v, 'checks', key);
        //v.checks = key;
      });
    },
1
2
3
4
5
6
7

总结
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的
1
2
3
4
5
6
7
8
9
10

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

建议您查看vue官网的深入响应式原理说明看完后您就明白了点击进入