今天开发的时候遇到一个多选取消点击状态的,渲染的时候先默认都选中,然后可以取消选中,自建了一个全为true的数组,点击时对应下标的arr[index]改为false,数据改变了状态没更新,突然想起来单独改变数字某一项或对象的属性视图不会更新,把数组改变值后重新复制结果可以了,项目结束后网上查了下具体情况,发现有大神总结的比较全面,怕找不到了摘抄了一段以作记录,摘抄自:https://blog.csdn.net/qq_34935885/article/details/75734365
vue 直接改变数组数据不刷新
因为 javascript 的限制,Vue.js 不能检测到下面数组变化:
直接用索引设置元素,如 vm.items[0] = {};
修改数据的长度,如 vm.items.length = 0。
为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个 $set() 方法:
// 与 example1.items[0] = ...
相同,但是能触发视图更新
example1.items.$set(0, { childMsg: ‘Changed!’})
或者使用vue变异方法: