this.$set(obj, key, value)
用途:为data中的某一个对象添加一个属性
<template>
<div>
<Button @click="setMessage" type="primary">添加属性</Button>
{{ student.name }}
<input type="text" v-model="student.age">
</div>
</template>
<script>
export default {
data() {
return {
student:{
name: "张三"
}
};
},
mounted() {},
methods: {
setMessage() {
this.student.age = 15;
console.log(this.student);
}
}
};
</script>
点击添加属性按钮的时候,给studen添加一个age属性,发现控制台打印出了这个属性,但是视图上并没有更新。
解决办法:
- 使用this.$set(obj, key, value)/vue.set(obj, key, value)
this.$set(this.student, 'age', 15)
- 通过Object.assign(target, sources)方法
this.student = Object.assign({}, this.student)
参考链接: https://blog.csdn.net/hhkongbai/article/details/101022019.