文章目录
- 数据处理代码片段 🌰 大概举例
- 原因
- 解决方法 - 深拷贝
- forceUpdate - 强制更新
今天遇到了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
, 还是要学会自己找到问题原因,通过优化代码逻辑来解决问题。