vue 异步数据更新问题_潇蓝诺依的博客-程序员ITS203

技术标签: vue  JS  异步数据  

问题

记录一下出现的问题, 数据翻倍
这是复现问题的代码

 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.新建一个临时空数组
    在这里插入图片描述
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_31126175/article/details/86512328

智能推荐

ffplay源码分析(1)_陌上烟雨遥407的博客-程序员ITS203_ffplay源码分析

1 ffplay 简介FFplay是使用FFmpeg库和SDL库的非常精简且可移植的开源媒体播放器。整个播放器源码才三千多行, 且性能稳定功能齐全,被广大开发者学习引用。比如向ijkplayer(哔哩哔哩)就是基于ffplay 做二次开发的。我们可以顺着如下六个函数,去阅读ffplay 源码:1)read_thread() : 读取读取音频,视频,字幕packet 并将将其放入对应的packet_queue 中去。2)audio_thread(): 音频解码,取音频packet_queue 内容

C语言 | 递归求n的阶乘_小林C语言的博客-程序员ITS203_c语言递归求n的阶乘

例30:C语言求n!,要求用递归实现。解题思路:本题和例29思想差不多,都是用递归来实现,读者可以回顾一下《C语言递归求年龄》求阶乘函数:int factorial(int number)//自定义阶乘函数 { int temp;//定义整型变量 if(number&lt;0)//如果这个数小于0 { printf("错误数据请,输入大于0的数!");//不符合条件,无法求 } else if(number==0||number==1)//0或者1本身的阶乘是1

android10 源码编译异常记录_大哥,请小心的博客-程序员ITS203

android源码编译异常编译环境:ubuntu20.04android11emulator x861. 启动模拟器后,进入模拟器桌面闪退,并报错:android emulator Segmentation fault (core dumped)解决方法: 1. 更新ubuntu 驱动 android emulator Segmentation fault (core dumped) 2. 编译目录下的/out/target/product/generic_x86/con

jdbc的事务自动提交和手动提交,以及mybatis开启自动提交后是否会复用一个连接的验证_神韵499的博客-程序员ITS203

转自:https://blog.csdn.net/cdy1996/article/details/81088623 jdbc的sql执行默认是自动提交事务默认时自动提交,当我手动提交时会报错,不过数据还是会插入到数据库中,因为执行完executeupdate后数据库会自动commit&nbsp;开启手动提交手动提交则需要手动调用commit才能提交事务&nb...

linux基于curl实现sftp,curl 实现sftp功能_weixin_39616379的博客-程序员ITS203

1. .h文件#include #include #include #pragma comment(lib,"libcurl_imp.lib")#undef DISABLE_SSH_AGENTint get_file_size (FILE *file);bool SftpUpload (std::string strSourc...

随便推点

select、poll、epoll的原理与区别_sususuqingxiao的博客-程序员ITS203

转载: select、poll、epoll的原理与区别IO复用select、poll、epoll都是IO复用的基本实现,select出现的最后,之后是poll,再是epoll。Select我们使用select就可以实现同时处理多个网络连接的IO请求,基本原理就是程序调用select,然后整个程序就进入阻塞状态,这个时候,kernel内核就会轮询检查所有select负责的文件描述符fd,当找到其中哪个数据准备好了文件描述符,会返回给select,select通知系统调用,将数据从内核复制到进程的缓存区

新闻资讯爬取_百度pkq的博客-程序员ITS203_新闻资讯爬虫

新闻资讯爬取​ 问题:需要一些动物方面的新闻,用python进行爬取标题,图片,内容等等在python方面没有使用自动化,直接访问的。过程十分简单把写好的请求头放上来浏览合适的目标网址对目标网址的源码进行分析用BeautifulSoup进行爬取整理成需要的json格式 [{键值对},{键值对}]把写好的请求头放上chrome=["代理请求头"]#也有代理ip的写法,可以自己尝试搜集一些,然后整理出几十条,这样被检测出来是爬虫的概率比较小,就可以更加愉快的作死的爬了# 让每次请求头

编写一个方法,去掉数组中重复元素_何敏华的博客-程序员ITS203_编写一个方法去掉数组里面重复的内容

方法一:排序后相邻去除法 arr = [1, 2, 5, 1, 3, 7, 9, 5]; function unique(arr) { arr.sort(); var _arr = [arr[0]];//结果数组 for (var i = 0; i &lt; arr.length; i++) { if (arr[i] != _arr[_arr.le...

blast2go进行Nr注释_SicongFu的博客-程序员ITS203_nr注释

在进行批量Nr注释的时候,blast2go是最为方便快速的选择.

java的lambda表达式、匿名类,Predicate接口,Consumer接口的应用_Simon_Sun_1984的博客-程序员ITS203_predicate 匿名类

import java.util.function.Consumer;public class Person { private String name; private int age; private int height; private int weight; public Person(String name, int age, int height

js倒计时限时秒杀_未闻-_的博客-程序员ITS203

js倒计时限时秒杀window.setInterval(function,interval) 设置一个定时器,并且设定了一个等待的时间interval,当到达时间后,执行对应的方法function,当方法执行完成,定时器并没有停止,以后每隔interval这么长的时间都会重新的执行对应的方法function,直到我们手动清除定时器为止;&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8

推荐文章

热门文章

相关标签