vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)

项目场景：

项目场景：公司最近有个项目需要实现一个资源树（节点选中—加载图层，取消—隐藏图层）的功能。

问题描述

资源树我们可以用elementui的el-tree来实现功能，子节点可以选中\取消选中，这里我们可以使用插槽来自定义子节点：

  通过切换checked值为true或者false来实现，一个checkbox的状态切换

这里是实现资源树及自定义子节点的方法：
通过循环LayerData数据源， 给数据添加checked属性，并绑定到v-model上，代码如下

<el-tree
            :data="LayerData":expand-on-click-node="false"
              node-key="id":default-expanded-keys="expandedKey"
              ref="tree":filter-node-method="filterNode":props="defaultProps"><div slot-scope="{ node, data }"class="selfSettingnode"><el-checkbox
                 v-model="data.checked"@change="onLayerShow(data)"></el-checkbox><span :title="node.label" v-html="handleMark(node.label)"@click="labelClick(data)"></span></div></el-tree>

因为初始数据源没有checked属性值，所以在请求回来数据（树状结构）后，博主这里对数据源进行了一个递归遍历，并循环赋值给了checked:false的值，

initLayerData(treeList){if(!treeList ||!treeList.length){return;}for(let i =0; i < treeList.length; i++){if(treeList[i].pid ===null){
          treeList[i].nodeType ='folder';
          treeList[i].checked=false;}else{
          treeList[i].nodeType ='layer';
          treeList[i].checked=false;}this.initLayerData(treeList[i].children);}}}

做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！

原因分析：

这里我又定义了一个mock测试数据，直接给到

checked：false

[{id:1,label:'一级 1',checked:false,children:[{id:4,label:'二级 1-1',checked:false,children:[{id:9,label:'三级 1-1-1'checked:false,},{id:10,label:'三级 1-1-2',checked:false,}]}]}

用这个数据源来绑定后，可以正常选中、取消，说明双向绑定上了！
博主分析到这里大概知道什么原因了：

循环生成数据时候添加checked属性，并没有添加get set方法，使得vue监听不到checked值变化，进而不能更新view。

这点，可以在浏览器vue调试中看到，点击时候 数据的checked属性 true和false是在交替变化，但是view上没同步更新。

解决方案：

用

vue.$set

方法来赋值，这样v-model绑定的数值可以监听checked的变化
这里将上面的方法改造一下，就完美解决我的问题了，代码如下：

initLayerData(treeList){if(!treeList ||!treeList.length){return;}for(let i =0; i < treeList.length; i++){if(treeList[i].pid ===null){
          treeList[i].nodeType ='folder';this.$set(treeList[i],'checked',false);}else{
          treeList[i].nodeType ='layer';this.$set(treeList[i],'checked',false);}this.initLayerData(treeList[i].children);}}

总结：

由此可总结出，所有需要双向绑定且循环生成的控件，可能都有同类问题，都需要用vue.$set的方法来赋值，特此记录一下，解决一个elementui的小坑。