el-checkbox 状态不更新

今天遇到了checkbox不更新的问题，相同的功能在其他地方正常使用，有些地方不能用。

数据处理代码片段 🌰 大概举例

从现有数据中过滤出新的数据，并且添加 selected 属性

原因

数据来源 / 浅拷贝 都会导致这个问题。

以上代码中处理数据后 直接赋值到 this.tableList 中，vue 只会将this.tableList指向filterData，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。 我理解不一定正确，仅供参考）

浅拷贝原因同上。

如果数据是从接口查询后直接处理的，可以直接赋值。

解决方法 - 深拷贝

将
this.tableList = filterData
修改为
this.tableList = JSON.parse(JSON.stringify(filterData))

注意: 由于数据结构是 数组对象 格式，这里不能使用扩展运算符进行拷贝。否则数组中对象还是指向原数据。

forceUpdate - 强制更新

虽然很多此类情况都能使用 this.$fourceUpdate() 解决 ，但频繁使用会影响性能。

考虑性能的情况下不建议使用。
如非迫不得已 不建议使用。

不是所有地方都有 forceUpdate， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。