我们先来看一段代码
<p>{{testObj.a}}</p>
...
data () {
return {
testObj: { a: 1 }
}
},
methods: {
changeVal () {
this.testObj.a = 2
console.log(this.testObj.a) //2
}
}
在执行changeVal方法后，我们理想中的结果是视图中的1变成2
而事实上这样改变对象的属性值,虽然可以改变它的值，却不会触发视图的更新
正确的做法应该使用vue提供的全局方法Vue.set(在组件中可以使用this.$set)
<p>{{testObj.a}}</p>
...
data () {
return {
testObj: { a: 1 }
}
},
methods: {
changeVal () {
this.$set( this.textObj, 'a', 2)
console.log(this.testObj.a) //2
}
}
除此之外vue还提供Vue.delete(在组件中可以使用this.$delete)用于删除对象的属性
网友评论