当我们往data里面追加一个没有或者删除一个数据时,视图并不会更新,受现代 Javascript 的限制, Vue 无法检测到对象属性的添加或删除
Vue 不允许在已经创建的实例上,动态地添加新的根级响应式属性(root-level reactive property)。然而,可以使用 Vue.set(object, key, value) 方法,将响应式属性添加到嵌套的对象上。
<p>{{user.age}}</p>
<input type="text" v-model="user.age">
app.user.age = 26
我们现在给user对象添加了一个age,但是我们改变age的时候,发现视图并没有跟着改变
现在我们重新设置一下
app.$set(app.user,'age',26)
现在我们再去改变age,发现视图已经可以跟着改变了
有时,你想要向已经存在的对象上添加一些新的属性,例如使用 Object.assign() 或 _.extend() 方法
在这种情况下,应该创建一个新的对象,这个对象同时具有两个对象的所有属性
Object.assign(app.user, {
age: 27,
favoriteColor: 'Vue Green'
})
可以通过如下方式,添加新的响应式属性
app.user = Object.assign({}, app.user, {
age: 27,
favoriteColor: 'Vue Green'
})