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 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
解读ES6中class关键字
Nov 20 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 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高级对象构建 工厂模式的使用
2012/02/05 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
微信小程序时间戳转日期的详解
2019/04/30 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python 读写中文json的实例详解
2017/10/29 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python中Mako库实例用法
2020/12/31 Python
质检的岗位职责
2013/11/17 职场文书
九一八事变演讲稿
2014/09/05 职场文书
安全责任书
2015/01/29 职场文书
《桂花雨》教学反思
2016/02/19 职场文书