在给一个对象添加新属性的时候,新添加的属性不是响应式的,可以用$set
<div>姓名:{{person.name}}</div>
<div>性别:{{person.sex}}</div>
export default {
data() {
return {
person: {
name: '小明'
}
}
},
mounted() {
this.person.sex = "男"
console.log(this.test)
}
}
页面显示为:
但是打印能够打印出来sex属性
为了解决这个问题,可以用$set
方法
$set的三个参数:this.$set(添加属性的对象,添加的属性,添加的属性值)
mounted() {
// this.person.sex='男'
this.$set(this.person, 'sex', "女")
console.log(this.person)
}