vue修改对象中的属性是对象数组该如何修改?

张巨侠
  • 300

image.png

这种复杂的嵌套该如何修改?我直接$set不行。

回复
阅读 470
5 个回答

不就是这个吗?
this.form.remindData = [{},{}]

初始化的时候

data(){
 return {
  form:{
   remindData:[]//这里显示需要声明
  }
 }
}

vue 中使用操作嵌套层级很多的对象时:
1、首先在data 中声明复杂的层级关系,
2、在赋值的时候,尽量使用this.$set操作;
3、操作的是数组时,使用vue 提供操作数组的api。push、pop、shift、unshift、splice 等

不知道能不能满足题主的要求

直接this.form.remindData赋值修改就行,vue不能响应的是在data中定义的对象没有显式声明的属性,以及元素是值类型的数组,因为vue是用Object.defineProperty来遍历数据的属性附上gettersetter来实现数据的监听的,你在控制台打印数据时会看到一堆带set/get前缀的属性就是如此来的,所以对象一开始没显式声明的属性的不会被遍历到,也就不会响应,这时才需要使用$set来显式的告诉vue,而数组元素是值类型是因为一些性价比上的考虑所以不支持响应(也许有听说数组不支持defineProperty拦截,这种观点是错的,因性价比问题而不支持是尤大说的),而数组中的元素如果是对象那么会遍历数组对每个元素遍历属性添加getter/setter所以是可响应的,只有当你需要对对象添加新的属性时才需要$set,跟直接挂在data上的对象是同理的。所以你直接this.form.remindData = [{},{}]即可

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入

vue2中如果修改数组的某个新增的值,必须使用$set,不然不会触发视图更新

如果是数组中已经存在的值,直接修改就可以了。

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏