解决vue中map类型数据改变,无法触发视图更新
解决vue中map类型数据改变,无法触发视图更新问题:我们在写 vue 的时候,data 数据可能会用到 map 类型的对象(带有迭代器的对象,谁不爱呢),比如说用 v-for 渲染到视图;用 map 对象会导致一个问题,即修改 map 对象里面的数据时,不会触发视图的更新,尤其是像下面这种使用:<template><div><div v-for="...
·
解决vue中map类型数据改变,无法触发视图更新
- 问题:我们在写 vue 的时候,data 数据可能会用到 map 类型的对象(带有迭代器的对象,谁不爱呢),比如说用 v-for 渲染到视图;用 map 对象会导致一个问题,即修改 map 对象里面的数据时,不会触发视图的更新,尤其是像下面这种使用:
<template>
<div>
<div v-for="item in demo">
<p>{{ item[0] }}</p>
<p>{{ item[1].xxx }}</p>
</div>
</div>
</template>
<script>
export default{
data(){
return {
demo: new Map([
[ 'name', new Map([['key1', {...}], ['key2', {...}], ...]) ],
...
])
}
},
}
</script>
此时使用 $set 或者直接修改最里层的对象的属性都是不会自动渲染到视图的
this.$set(this.demo.get('name').get('key1'), 'xxx', someValue);//无效
this.demo.get('name').get('key1').xxx = someValue;//无效
- 解决:正确的姿势应该是
...//相关修改操作
this.$forceUpdate()//强制重新渲染视图就行了
有意思的是,假如你的修改数据的调用函数里面有修改其它数据,比如:
this.someArray.push(something);
视图同样会进行更新
更多推荐
已为社区贡献1条内容
所有评论(0)