Vue中帶有__ob__: Observer的數組無法遍歷的問題

一、問題描述

如果不是Push進數組不會出現__ob__: Observer

如果要使用push就會出現__ob__: Observer

參考：vue中{__ob__: Observer}

 

二、問題分析

獲取數組長度就是 this.chooseId.length 這個方法的，這個不要懷疑，而你 輸出this.chooseId.length 為0 是因為，你獲取的時機不對，不信？你把 打印放在一個 setTimeout 函數里。也就是說你還沒有給 this.chooseId 添加數據的時候就獲取長度了。

__ob__: Observer這個屬性其實是Vue監控變量產生的，原因不在這里。

 

三、解決和總結

別忘了Ajax是異步請求。

這里我犯了個錯，其實不是數組無法遍歷，是我在Ajax請求后直接遍歷了數組，由於是異步的，第一時間Ajax請求還未收到返回參數，也就還沒有添加到數組里，遍歷時自然沒有內容。

解決方法就是

1.把Ajax請求設置為同步的，即async屬性設置為false;顯然這不是最好的解決方法，使用ajax就是為了異步請求局部刷新，但是這樣設置完能保證在一個線程中運行，請求到數據填充結束才訪問。

2.根本解決，遍歷數組的操作寫在Ajax請求成功填充數組后。

$axios.get(url, {params: param})
            .then(response => {
　　　　　　　　　 // 填充數組操作
                // 在這里遍歷數組操作
            }, err => {
            })
            .catch((error) => {
            })