如果想动态给对象添加属性,可以使用vue.set的方法
先引入全局的vue,然后给this.food添加count的属性,值是1
import Vue from 'vue';
props: {
food: {
type: Object
}
},
Vue.set(this.food, 'count', 1);
Vue.set( target, key, value )
参数:
{Object | Array} target
{string | number} key
{any} value
返回值:设置的值。
用法:
设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。(也就是不能直接给data添加属性,可以给data里面的对象添加)
Vue.delete( target, key )
参数:
{Object | Array} target
{string | number} key/index
仅在 2.2.0+ 版本中支持 Array + index 用法。
用法:
删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是你应该很少会使用它。
在 2.2.0+ 中同样支持在数组上工作。
目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。
删除也是同理
总结:就是你想给data或者props中的对象添加一个属性,即使你做了修改,由于vue的机制,它可能检测不到,因此,我们要利用vue.set来实现这个操作。
参考文档:https://cn.vuejs.org/v2/api/#Vue-set
http://blog.csdn.net/tian361zyc/article/details/72909187