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的小坑。
- 点赞
- 收藏
- 关注作者
评论(0)