欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 解決異步數(shù)據(jù)更新問題

 更新時(shí)間：2019年10月29日 09:05:23   作者：瀟藍(lán)諾依  
今天小編就為大家分享一篇vue 解決異步數(shù)據(jù)更新問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題

記錄一下出現(xiàn)的問題, 數(shù)據(jù)翻倍

這是復(fù)現(xiàn)問題的代碼

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('此時(shí)的this.allresult',this.allresult);
    });
  }
 },
 watch: {
  space() {
   console.log("watch");
   this.getmessage();
  }
 },
 mounted() {
  this.space = "123";
  console.log("mounted");
  this.getmessage();
 }

結(jié)果

此時(shí)你可以看到第二次的數(shù)據(jù)時(shí) 是 第一次的 2倍

原因

mounted 和 watch 都執(zhí)行 getmessage 方法,雖然方法之前 對數(shù)據(jù)進(jìn)行了清空,但是 異步請求執(zhí)行的慢,

所以兩次調(diào)用getmessage相當(dāng)于 this.allresult = []; this.allresult = []; axios...;axios....: 這個順序

所以才會出現(xiàn)上述現(xiàn)象

解決

1.修改this.allresult = []的位置

2.新建一個臨時(shí)空數(shù)組

以上這篇vue 解決異步數(shù)據(jù)更新問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論