vue 针对动态添加的属性,不支持响应式修改,解决办法

时间:2024-03-31 20:19:49

场景描述:很多时候前端从后台接口获取的数据列表的数据,满足不了列表渲染后,前端所有的数据控制。

举例说明:列表中需要有可点击本条数据实现隐藏/展示的功能。后台数据中是没有控制本条数据的对象。

比如有10条数据,每条数据被点击的时候,当前数据可实现隐藏和显示(show),

那么就要在数据初始化时,动态的给每一个对象添加新属性show:false。因为这是动态添加的,问题根源来了,vue针对动态添加的属性不支持一般化的设置,如item.show = true。XX完全做不到。

那么,解决办法就是,在根源上解决,在刚开始添加的时候就可用this.set(obj,'propertyName','Key'),实现动态添加新属性。

修改时,也是用this.set(obj,'propertyName','newKey'),ok啦!

看了https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

后知道的

vue 针对动态添加的属性,不支持响应式修改,解决办法