这种复杂的嵌套该如何修改?我直接$set不行。
vue 中使用操作嵌套层级很多的对象时:
1、首先在data 中声明复杂的层级关系,
2、在赋值的时候,尽量使用this.$set操作;
3、操作的是数组时,使用vue 提供操作数组的api。push、pop、shift、unshift、splice 等
不知道能不能满足题主的要求
直接this.form.remindData
赋值修改就行,vue
不能响应的是在data
中定义的对象没有显式声明的属性,以及元素是值类型的数组,因为vue是用Object.defineProperty
来遍历数据的属性附上getter
和setter
来实现数据的监听的,你在控制台打印数据时会看到一堆带set/get
前缀的属性就是如此来的,所以对象一开始没显式声明的属性的不会被遍历到,也就不会响应,这时才需要使用$set
来显式的告诉vue
,而数组元素是值类型是因为一些性价比上的考虑所以不支持响应(也许有听说数组不支持defineProperty
拦截,这种观点是错的,因性价比问题而不支持是尤大说的),而数组中的元素如果是对象那么会遍历数组对每个元素遍历属性添加getter/setter
所以是可响应的,只有当你需要对对象添加新的属性时才需要$set
,跟直接挂在data
上的对象是同理的。所以你直接this.form.remindData = [{},{}]
即可
已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入
vue2中如果修改数组的某个新增的值,必须使用$set,不然不会触发视图更新
如果是数组中已经存在的值,直接修改就可以了。
已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
9 回答1.6k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
6 回答749 阅读
2 回答1.8k 阅读
2 回答1k 阅读✓ 已解决
4 回答820 阅读✓ 已解决
3 回答1.2k 阅读✓ 已解决
不就是这个吗?
this.form.remindData = [{},{}]