element-ui - el-checkbox绑定失效

---

场景

通过使用 el-checkbox ，实现如下的场景， 点击某个复选框，实现勾选和取消勾选。

例如：后台返回数据格式如下：

[
   { id: 1, pid: 1, name: '地区' },
   { id: 2, pid: 2, name: '游戏类型' },
   { id: 3, pid: 4, name: '性别' },
   { id: 4, pid: 5, name: '设备类型' },
   { id: 5, pid: 6, name: '休闲时间' },
   { id: 6, pid: 7, name: '王者荣耀' },
   { id: 7, pid: 8, name: '音乐' },
   { id: 8, pid: 9, name: '品牌手表' },
   { id: 9, pid: 10, name: '相机' },
   { id: 10, pid: 12, name: '游戏人群' },
 ]

获取到数据后，我们要通过遍历数据逐条添加checked属性：

this.allData.map(item => {
	item.checked = false
	return item
})

结果查看效果时发现：点击时，复选框勾选不上：

---

原因

前端添加checked属性， vue并没有添加 get 和 set 方法，因此，监听不到 checked 值变化，进而不能更新view。这点可以在浏览器vue调试中看到，点击时，数据的checked属性 true 和 false 是在交替变化，但是view上没有同步更新。

解决方法

用 vue.$set 方法，强制vue监听checked属性：

this.allData.map(item => {
	// item.checked = false
	this.$set(item, 'checked', false)
	return item
})

---

总结

原文地址： vue与element ui的el-checkbox的坑