首先你有没有遇见过 vue数据改变页面没有改变(没有更新)的情况???
问题所在:
当vue的data中的数据(对象和数组)在初始化完毕之后 再向其中插入新的属性的时候 那么这时数据发生改变 但是页面视图不会更新
举个例子:
<template>
<div>
<h1>{{ obj.name }}--{{obj.age}}</h1>
<button @click="funClick()">点我添加新内容</button>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
name: "小黑",
},
}
},
methods:{
funClick(){
//我要添加新内容(那么这时数据发生改变 但是页面视图不会更新)
this.obj.age=18
console.log("age",this.obj.age) //此时这个18是没有的
}
}
};
</script>
问题所在:
在vue2.0中双向绑定使用的是数据劫持Object.defineProerty() 但是Object.defineProerty() 只会监听初始化的数据 如果初始化完毕了 数据在新增新的内容 Object.defineProerty() 就监听不到 监听不到就没有数据劫持 没有数据劫持就没有双向绑定 所以 数据变了视图也不会改变
解决方法------$set
首先说下语法: this.$set("你要修改谁","你要新增的key",“你要新增的val”)
基于上面的案例我就是想,中途添加一个新属性并且,数据变视图也要改变怎么写??
methods:{
funClick(){
//this.obj.age=18
this.$set(this.obj,"age",18)
console.log("age",this.obj.age)
}
}