在vue的开发过程中,偶尔会遇到在想要更新数据的情况下,控制台中已经有更新数据打印,但是视图中没有更新的情况,比如在data中我们需要给data定义一个对象,在使用的过程中需要个对象添加属性:
代码如下:
<template>
<view>
{{list.name}}
<input v-model="list.age" />
<button @click="btnAdd">点击添加属性</button>
</view>
</template>
<script>
export default {
data(){
return{
list: {
name: 'chen'
}
}
},
methods: {
btnAdd(){
this.list.age = 23
console.error(this.list)
}
}
}
</script>
<style>
</style>
点击添加属性按钮之后,控制台已经打印,视图没有更新
解决方法:通过this.$set(Object,key,value)方法就可以在数据变化之后更新视图
methods: {
btnAdd(){
// this.list.age = 23
this.$set(this.list,'age',23)
console.error(this.list)
}
}