vue 动态添加单个,多个属性,触发视图更新

3,103 阅读1分钟
昨天在vue项目中因为一些需求需要在JSON中新增一个属性,也能console出来,但是就是不能在页面渲染,即不能触发视图更新 

之前我们向对象中新增属性的时候直接是这样写的:

var obj={};
obj.name="wenwen";

我也在项目中这样写了,所以就报错了,哈哈哈~

其实在vue 中新增属性应该用$set这个方法的

1. 添加单个属性

用$set()方法,既可以新增属性,又可以触发视图更新。

this.$set(this.data,”key”,value)

此时我们应该这样写:

this.$set(this.obj,"name","wenwen");

这样就没错啦~~

2.添加多个属性

使用 Object.assign()用原对象与要混合进去的对象的属性一起创建一个新的对象。

this.obj=Object.assign({}, this.obj, {				  
                                  age: 18,
				  love: '帅哥'
				})