达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
vue解决异步数据更新问题
问题
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了双河免费建站欢迎大家使用！
记录一下出现的问题, 数据翻倍
这是复现问题的代码
data() {
return {
space: "",
allresult: []
};
},
methods: {
getmessage() {
this.allresult = [];
axios
.get(
"https://gist.githubusercontent.com/xiaolannuoyi/9b0defe4959e71fa97e6096cc4f82ba4/raw/4be939123d488cee7ecefc055fb5ecb2ed8d5c8d/test"
)
.then(data => {
console.log(data);
let result = data.data;
for (let i = 0; i < result.length; i++) {
//原因在于这里的this.Allresult
this.allresult.push({
id: result[i].id,
name: result[i].name,
age: result[i].age
});
}
console.log('此时的this.allresult',this.allresult);
});
}
},
watch: {
space() {
console.log("watch");
this.getmessage();
}
},
mounted() {
this.space = "123";
console.log("mounted");
this.getmessage();
}结果
此时你可以看到第二次的数据时 是 第一次的 2倍
原因
mounted 和 watch 都执行 getmessage 方法,虽然方法之前 对数据进行了清空,但是 异步请求执行的慢,
所以两次调用getmessage相当于 this.allresult = []; this.allresult = []; axios...;axios....: 这个顺序
所以才会出现上述现象
解决
1.修改this.allresult = []的位置
2.新建一个临时空数组
以上这篇vue 解决异步数据更新问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。
分享文章：vue解决异步数据更新问题
本文路径：http://dzwzjz.com/article/ighsdo.html