vue 資料不能及時更新的

雙向綁定後的資料沒有重新整理到view上

let tempArr = [];
        tempArr.push({id: 1, name: 'apple'});
        tempArr.push({id: 1, name: 'banana'});
        tempArr.push({id: 1, name: 'orange'});
        this.arr = tempArr;
        setTimeout(() => {
          // this.arr[0].color = 'white';
          for (let fruit of tempArr) {
            fruit.color = 'white';
          }
          console.log("result:", this.arr)
        }, 3000);
           

view頁面的結果

console結果

解決方案

let tempArr = [];
        tempArr.push({id: 1, name: 'apple'});
        tempArr.push({id: 1, name: 'banana'});
        tempArr.push({id: 1, name: 'orange'});
        // 在設定雙向綁定之前，就已經有了color這個屬性
        for (let fruit of tempArr) {
          fruit.color = 'aa';
        }
        this.arr = tempArr;
        console.log("result--start:", this.arr)
        setTimeout(() => {
          // this.arr[0].color = 'white';
          for (let fruit of this.arr) {
            fruit.color = 'white';
          }
          console.log("result:", this.arr)
        }, 3000);
           

結果

頁面輸出結果

在雙向綁定之前就已經有了color屬性

console輸出改變後的結果

參考過的網站位址：

https://www.cnblogs.com/zhuzhenwei918/p/6893496.html
           

轉載于:https://my.oschina.net/u/3011256/blog/1632487