vue 解决异步数据更新问题


Posted in Javascript onOctober 29, 2019

问题

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

这是复现问题的代码

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 解决异步数据更新问题

以上这篇vue 解决异步数据更新问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
微信小程序制作表格的方法
Feb 14 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
VUE实现强制渲染,强制更新
Oct 29 #Javascript
js实现贪吃蛇小游戏
Oct 29 #Javascript
浅谈vue异步数据影响页面渲染
Oct 29 #Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 #Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 #Javascript
vue设置一开始进入的页面教程
Oct 28 #Javascript
Vue调用后端java接口的实例代码
Oct 28 #Javascript
You might like
使用PHP求两个文件的相对路径
2013/06/20 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python生成器(Generator)详解
2015/04/13 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python探索之SocketServer详解
2017/10/28 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python如何统计序列中元素
2020/07/31 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
外语学院毕业生的自我鉴定
2013/11/28 职场文书
关于工作经历的证明书
2014/10/11 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
如何利用python实现Simhash算法
2022/06/28 Python
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers