企业建设网站公司/seo一键优化
this.$set的使用
在平时使用vue进行开发的时候,我经常会遇到一个这样的问题:
就是当data中包含声明且已赋值的对象或者数组(数组包对象)时,我们要向当前的这个对象中添加一个新的属性并且更新,结果发现并不会更新视图,只在控制台打印
<template><div><span>{{obj}}</span><input type="button" @click="add()"></div>
</template><script>
export default {data(){return{obj:{name:"小明"}}},methods:{add(){if(!this.obj.age){this.obj.age = 20}else{this.obj.age++}}}
}
</script><style></style>
受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
所以在data中注册的对象是响应式的,而后来添加的属性不是响应式的,只是个普通的属性,为了避免上面出现的问题,我们使用this.$set来向响应式对象中添加响应式的新属性
语法:this.$set(target,key,value)target:目标对象(要更改的那个对象/数组)key:要更改的具体属性(新属性)value:新属性的值(或者重新赋的值)
<template><div><span>{{obj}}</span><input type="button" @click="add()"></div>
</template><script>
export default {data(){return{obj:{name:"小明"}}},methods:{add(){if(!this.obj.age){//语法:this.$set(this.obj,"age",23)}else{this.obj.age++}}}
}
</script><style></style>
this.$delete
<template>
<div>{{testData.name}}<button @click="del">删除</button>
</div>
</template>
<script>
export default {name: "Home",data () {return {testData:{name:"zs"}};},methods:{del(){this.$delete(this.testData,"name")}}
}
</script>
以下为转载内容
$ set /Vue.set
$ nexttick,$ set