微客导航 » 文章资讯 » vue 中this.$set 动态绑定数据的案例讲解

vue 中this.$set 动态绑定数据的案例讲解

2023-07-06 04:33:03 172

感觉网上对this.$set的讲解乱糟糟的，我来总结一下对它单个数据、对象、数组、json数据的绑定.

话不多说直接上代码：

补充：Vue使用$set动态给数据设置属性

在实际的开发过程中，给表单元素绑定model的时候，绑定的元素的属性是根据后台数据动态生成的。如果使用常规的赋值方式，是无法更新视图的

需要使用

this.$set(dataName,keyName,keyValue)

exportdefault{
data:{
//先定义一个空对象
formObject:{},
arrayList:[],
},
mounted(){
this.initPage()
},
methods:{
initPage(){
this.$store.dispatch(namespace/callData).then(res=>{
//给数据设置key-value
res.data.forEach(item=>{
//❗❗❗❗❗this.formObject[item.name]=item.value//❗❗❗❗这种方式是不能更新视图的
this.$set(this.formObject,item.name,item.value)//✅✅✅✅可以更新视图
})
})
//修改数组
this.$store.dispatch(namespace/callData).then(res=>{
//给数据设置key-value
this.$set(this.arrayList,0,(res.data)[0].id)✅✅✅✅可以更新视图
})
}
}
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持毛票票。如有错误或未考虑完全的地方，望不吝赐教。

返回顶部
3162201930
czq8825@qq.com

vue 中this.$set 动态绑定数据的案例讲解

热门推荐

随机推荐