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 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
JavaScript 反射学习技巧
Oct 16 Javascript
javascript实现计算器功能详解流程
Nov 01 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
php语言流程控制中的主动与被动
2012/11/05 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
php修改数组键名的方法示例
2017/04/15 PHP
json 实例详细说明教程
2009/10/31 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
清扬洗发水广告词
2014/03/14 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
小王子读书笔记
2015/06/29 职场文书
学生检讨书范文
2019/06/24 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android