vue中对象数组多层嵌套视图不更新的解决办法

Ourboke
Ourboke
Ourboke
16368
文章
148
评论
2022年1月10日10:11:42

当我们开发的时候,有一些数据是对象里面嵌套数组,数组里面嵌套对象,数据结构很复杂的时候,当你改变数组对象里面的某个值时,发现数据更新了,但是页面不更新,那么应该怎么解决呢?

1、对象更新

{{a.title}}

需要使用,以下这种方式去更新

this.$set(a,'title','列表2');
//或者
Vue.set(a,'title','列表2');

2、数组更新

this.arr=[1,2,3,4];
<span v-for="value in arr">{{value}}</span>

同理:

Vue.set(arr,索引值,value);
//或者
arr.splice(索引值,元素数目,value);

3、数组对象的组合更新

this.arr=[{
key:'key1',
value:[] 
},{
key:'key2',
value:[] 
}];

例如,想要将arr[0].value重新赋一个数组,可以使用

this.arr[0].value.splice(0, 1, ...newArr);
//或者
this.$set(this.arr[0], "value", newArr);

this.$set(参数1,参数2,参数3) 用法总结

更新数组

参数1:数组

参数2:数组的索引

参数3:赋值的数据

更新对象

参数1:对象

参数2:key

参数3:赋值的数

Vue实现详情返回列表页记住滚动条位置 网站建设

Vue实现详情返回列表页记住滚动条位置

最近用 Vue 做移动端页面遇到一个问题,从列表页进入详情页,再返回到列表页,不管之前滚动到哪里,每次返回时都跳到列表最顶部。这样体验肯定不好,期望的应该是记住滚动条的位置,每次返回还是在原来的位置上...
Nginx开启gzip压缩的完整步骤记录 网站建设

Nginx开启gzip压缩的完整步骤记录

Nginx开启Gzip压缩功能,可以使网站的css、js 、xml、html文件在传输时进行压缩,提高访问速度,进而优化Nginx性能,下面这篇文章主要给大家介绍了关于nginx开启gzip压缩的相关...
python实现腾讯云轻量云流量超标自动关闭系统 网站建设

python实现腾讯云轻量云流量超标自动关闭系统

前几天在LOC上看到说良心云的轻量云流量超标后会额外扣超出的流量费,吓得我赶紧学着也弄了个脚本来监控轻量云,当流量超过自己设定的预警值后,自动关闭轻量云,避免超流量要付额外的流量钱。 但...