大家好,今天给大家分享的是vue中对象属性改变视图不更新问题,希望大家喜欢。
我们先来看一段代码let vm = new Vue{
el: '#app',
data: {
obj: { k: 'v' }
}, ...
}
在上面的代码中有个obj的对象属性,我们可以看到上面的obj只有一个k属性,然而我们在做项目的过程中,比如我们 this.obj.name="wuwei"
然后我们在模板中调用 {{obj}}
大家会发现这个页面并没有更新,那么遇到这样的情况怎么办呢?
如果我们this.obj.k = "wuwei"
我们会发现页面变了,因为这个obj默认是有k属性的,而name这个属性是新增的。下面我们来说下解决办法
1,如果我们在知道某属性名称的时候,我们可以默认给个属性,然后给个初始值,就类似上面的k属性一样。
2,利用Vue.set(object,key,val)
例:Vue.set(vm.obj,'name','wuwei')
这样我们就可以看到模板可以更新了,而不用设置属性的初始值
3,利用this.$set(this.obj,key,val)
this.$set(this.obj,'name','wuwei')
这个方法和上面的方法其实是一种的不同实现方式
4,利用Object.assign({},this.obj)创建新对象
例: this.obj.name='wuwei'; this.obj = Object.assign({}, this.obj) 或 this.obj = Object.assign({}, this.obj,{'name','wuwei'})
好了,今天的vue中对象属性改变视图不更新问题就分享到这里,大家再见