|
解决vue中map类型数据改变，无法触发视图更新
问题：我们在写 vue 的时候，data 数据可能会用到 map 类型的对象（带有迭代器的对象，谁不爱呢），比如说用 v-for 渲染到视图；用 map 对象会导致一个问题，即修改 map 对象里面的数据时，不会触发视图的更新，尤其是像下面这种使用：
{{ item[0] }}
{{ item[1].xxx }}
export default{
data(){
return {
demo: new Map([
[ 'name', new Map([['key1', {...}], ['key2', {...}], ...]) ],
...
])
}
},
}
此时使用 $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);
视图同样会进行更新
|