【Vue中对象直接赋值的坑】

Vue中对象直接赋值的坑

受JavaScript的限制,Vue不能监听到对象属性的添加或删除。如果这样做了,你会发现添加或删除的属性不是响应式的,即无法及时更新视图。

如果我们需要将a对象赋值给b对象时,要么把b对象的所有属性都在a对象中定义一下,要么 使用this.$set(this.object,key,value)将b对象中有a对象中没有的属性set进去,或者使用Object.assign(this.a,this.b) 将所有可枚举属性的值从b对象复制到a对象并返回a对象。(如果有同名属性的话,b属性的值会覆盖a属性的值)

注意:目前IE浏览器不兼容Object.assign(),如果需要兼容IE的话最好不要直接使用这个方法。

比如,我们在页面上绑定了一个dataForm.userIds
在这里插入图片描述
但我们并没有在data中对dataForm.userIds进行初始化的话,
在这里插入图片描述
即使我们在页面created的时候给它赋值了, 赋值是能赋进去的
在这里插入图片描述
但这个userIds属性仍然不是响应式的,他的值改变不会触发视图的渲染
在这里插入图片描述

我们可以这样做来避免这个问题:
初始化userIds属性
在这里插入图片描述

使用this.$set(this.object,key,value)添加对象的userIds属性,这时候添加的属性是响应式的。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大雄不是大熊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值