vue 解决异步数据更新问题

网络编程 2024/12/25 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

问题

记录一下出现的问题, 数据翻倍

这是复现问题的代码

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,异步,数据,更新

标签：

vue,异步,数据,更新

幽灵资源网 Design By www.bzswh.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

幽灵资源网 Design By www.bzswh.com

评论“vue 解决异步数据更新问题”

暂无评论...