一
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) 添加