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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
JS实现商品橱窗特效
Jan 09 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 编写大型网站问题集
2010/05/07 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
python获得图片base64编码示例
2014/01/16 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
python使用turtle绘制分形树
2018/06/22 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
Python实现元素等待代码实例
2019/11/11 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
大学生实习思想汇报
2014/01/12 职场文书
素质拓展感言
2014/01/29 职场文书
联谊会主持词
2014/03/26 职场文书
2015年教研员工作总结
2015/05/26 职场文书
学生会任命书范本
2015/09/21 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Python 中random 库的详细使用
2021/06/03 Python
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android