针对vue中请求数据对象新添加的属性不能响应式的解决方法

一

1.需要给对象添加属性时，不能采用传统的obj.属性=值，obj[属性]=值 来添加属性，在vue页面时需要这样使用

this.$set(obj,"propertyName","value") 来添加属性    /* obj 要添加属性的对象   propertyName  属性名   value 属性值 */

2.同理，在修改属性的时候，在对应的方法中也需要this.$set(obj,"propertyName","value") 来修改属性属性  

注意：新增，修改必须都写！！！

这样页面就可以动态响应新添加的属性了

 

二

1.vue不在data中声明的对象不是响应式。采用传统的obj.属性=值，obj[属性]=值 来添加属性的时候会报错

 

总结：

Vue不能检测到对象属性的添加或删除，由于Vue在初始化实例时会对属性执行getter/setter转化，所以属性必须在data上才能被执行，这个是响应式的。对于已创建的实例，Vue不允许添加根级别的响应式属性。

解决方法：

方法一、在data中事先声明该属性；

方法二、使用 Vue.set(object, key, value)或 vm.$set(object, key, value) 添加