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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php截取视频指定帧为图片
2016/05/16 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
python如何修改装饰器中参数
2018/03/20 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python实现淘宝秒杀脚本
2020/06/23 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
《分一分》教学反思
2014/04/13 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
党校个人总结
2015/03/04 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
校园运动会广播稿
2015/08/19 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电