vue this.$set 给data对象新增属性,并触发视图更新
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 data () {return {user: {name: '',id: ''}}}如果我们直接给user增加属性mounte...
·
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性
data () {
return {
user: {
name: '',
id: ''
}
}
}
如果我们直接给user增加属性
mounted () {
this.user.age = 30
}
虽然user的属性值跟随变化,但是页面上的视图是不发生任何刷新的,也是只展示name/id的值,age值还是为空。
原因是由于js的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
此时要解决上述问题,给对象添加属性的时候,页面视图跟着刷新,可以用set的方法:
正确写法:this.$set(this.data,”key”,value’)
mounted () {
this.$set(this.user,"age", 30)
}
还有一种情况是给已有对象添加多个属性,可能会用到Object.assgin(),这种情况,应该用两个对象创建一个新对象
不要这样写:
Object.assign( this.user, { tel: 18888888888, sex: 'Y' })
而应该这样写:
this.user = Object.assign( {}, this.user, { tel: 18888888888, sex: 'Y' })
更多推荐
已为社区贡献1条内容
所有评论(0)