vue 修改对象的值视图没有发生改变_vue中对象属性改变视图不更新问题

大家好，今天给大家分享的是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中对象属性改变视图不更新问题就分享到这里，大家再见