vue 解决异步数据更新问题

作者:潇蓝诺依 时间:2024-04-30 10:45:28 

问题

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

这是复现问题的代码


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();
}

结果

vue 解决异步数据更新问题

此时你可以看到第二次的数据时 是 第一次的 2倍

原因

mounted 和 watch 都执行 getmessage 方法,虽然方法之前 对数据进行了清空,但是 异步请求执行的慢,

所以两次调用getmessage相当于 this.allresult = []; this.allresult = []; axios...;axios....: 这个顺序

所以才会出现上述现象

解决

1.修改this.allresult = []的位置

vue 解决异步数据更新问题

2.新建一个临时空数组

vue 解决异步数据更新问题

来源:https://blog.csdn.net/qq_31126175/article/details/86512328

标签:vue,异步,数据,更新
0
投稿

猜你喜欢

  • Javascript基础之数组的使用

    2024-04-30 08:54:33
  • Python实现发送与接收邮件的方法详解

    2023-04-05 04:48:43
  • Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析

    2022-04-16 17:07:04
  • MySQL5.7 JSON类型使用详解

    2024-01-15 23:57:04
  • python中的多线程锁lock=threading.Lock()使用方式

    2022-02-12 19:48:39
  • Python使用win32 COM实现Excel的写入与保存功能示例

    2021-03-30 11:28:50
  • Python数据分析之matplotlib绘图详解

    2022-11-21 16:34:30
  • vue中使用vue-qriously插件生成二维码

    2024-04-27 16:01:31
  • Ubuntu18.0.4下mysql 8.0.20 安装配置方法图文教程

    2024-01-21 07:10:03
  • 基于AJAX技术提高搜索引擎排名

    2008-01-24 12:45:00
  • 10种检测Python程序运行时间、CPU和内存占用的方法

    2023-08-04 16:28:14
  • Python全栈之for循环

    2021-06-04 20:55:06
  • 利用Pandas读取表格行数据判断是否相同的方法

    2022-07-30 22:10:20
  • MySQL索引类型Normal、Unique和Full Text的讲解

    2024-01-20 09:56:19
  • JavaScript错误处理try..catch...finally+涵盖throw+TypeError+RangeError

    2024-04-22 13:26:05
  • pytorch .detach() .detach_() 和 .data用于切断反向传播的实现

    2022-01-30 21:24:56
  • 最简短的拖动对象js代码实例

    2007-10-09 13:33:00
  • php 字符串中是否包含指定字符串的多种方法

    2023-06-11 20:21:38
  • tensorflow基于Anaconda环境搭建的方法步骤

    2022-11-04 10:12:58
  • asp使用shotgraph组件生成数字和字母验证码

    2007-09-26 12:26:00
  • asp之家 网络编程 m.aspxhome.com