Vue中this.$set的用法(解决数组、对象修改后不更新问题)
一、this.$set实现什么功能,为什么要用它?当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了,简单来说this.$set的功能就是解决这个问题的啦。官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比
·
一、this.$set实现什么功能,为什么要用它?
当你发现你给对象加了一个属性
,在控制台能打印出来,但是却没有更新到视图上时
,也许这个时候就需要用到this.$set()
这个方法了,简单来说this.$set的功能就是解决这个问题的啦。官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’).
二、怎么用它?
举个例子:
1.Vue写在template中的代码:
<div v-for="(item,index) in list" :key="index"
>{{item.name}}
</div>
<button @click="changeValue" type="primary">改变值</button>
</div>
2.export default{}中data数据
data(){
return {
list:[
{name:'29Kun',id:1},
{name:'299Kun',id:2},
]
}
}
3.点击按钮触发changeValue方法
mounted(){
this.list[2] = {name:'2999Kun',id:3}
console.log(this.list[0]);
},
methods: {
changeValue(){
this.$set(this.list,2,{name:'2999kun',id:3})
}
}
调用方法:this.$set( target, key, value )
target
:要更改的数据源(可以是对象或者数组)
key
:要更改的具体数据
value
:重新赋的值
4.在没有点击按钮的时候,界面是这样的,虽然界面没有显示出来,但是控制台已经打印出来了
5.当点击按钮的时候,调用this.$set方法,成功显示第三个属性。
参考:https://www.jianshu.com/p/6f28f5abee08
更多推荐
已为社区贡献3条内容
所有评论(0)