本人java后端，在寫一個電商網站，vue+springBoot，現在被一個問題困擾了兩天了。
具體問題如下：
如圖，我用vue呼叫后端獲取商品分類的介面，
介面呼叫成功，獲取資料也是成功的，我在控制臺里可以看到console.log()出來的result。
但是，頁面里去展示這個{{ categories }}時，顯示categories.length為0。
額，右邊兒控制臺大片的報錯和警告還請大家暫時忽略，那個是頁面里之前寫死的category資料被我換成了后端調出來的資料，而原來的屬性沒有換，導致頁面呼叫了不存在的屬性導致的。
然后，更讓我覺得困惑的是，我在mounted里面在呼叫getCategories()之前連續輸出了this和this.categories，this里的categories在呼叫函式之前就可以看到有值了。如果這都暫時放在一邊不去理會，我們看下面這張圖，我們可以看到，第一次輸出this的時候，this的categories屬性里是有一個長度為6的list的，但是，如果輸出this.categories的話，就顯示輸出的list是空，長度為0。
我可能，，，這個，前端學的不太好，還請大家，，多多指教。被困擾兩天了，兩天啊！！！
救救孩子！
uj5u.com熱心網友回復：
救命！求各位了！uj5u.com熱心網友回復：
vue監控陣列變化是需要push等陣列方法，直接賦值監控不到的。你可以嘗試a.push(...b)這樣uj5u.com熱心網友回復：
先把無關的error給解決了uj5u.com熱心網友回復：
因為你data(){}里categories是個空陣列，第一次還沒獲取到后端資料時就顯示了空陣列長度。uj5u.com熱心網友回復：
vue設定物件值時應該使用$setthis.categories = result.data.body
//改為：
this.$set(this,'categories',result.data.body)
uj5u.com熱心網友回復：
截圖比較混亂,但是建議一下,是否考慮一下,在created中進行資料的獲取呢?比如你呼叫介面獲取資料的方法是getlist,可以在created中呼叫一下這個方法uj5u.com熱心網友回復：
Hello, this problem is easy for beginners to encounter, the reason is that the hook life cycle related problems, the package you requested is not in line with the matter.Suggest trying other life cycles or synchronous asynchronization with ES6.
if you something else,email me please.email address in my home page
bless you
uj5u.com熱心網友回復：
因為你列印的時候，介面還沒有獲取到資料uj5u.com熱心網友回復：
有兩種情況，一，是樓上所說的獲取的時候可能是初始值，所以是空陣列。二，有可能有延時，給個200毫秒定時器試試。我正好前兩天也遇到過，點開屬性的時候有值，但是直接用屬性就是初始值。解決辦法就是給個setTimeout試試。uj5u.com熱心網友回復：
可能涉及商業保密事項，被系統阻止顯示。需要濾去一些標記字符，比如tag 什么的，或者干脆翻譯成中文再顯示。uj5u.com熱心網友回復：
setTimeoutuj5u.com熱心網友回復：
陣列和物件不支持雙向系結，需要使用$set，樓上有個小嬰兒已經發出答案了uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
試試這個;const that = this;
你的axios方法. then(res=>{
that.xxx = res.data
}).catch(error=>{
})
lambda 運算式這種寫法，response=>{},方法里this的定義被改變了？好像是這樣。
uj5u.com熱心網友回復：
你這個很正常呀，你是先輸出的長度，然后才給它賦值，所以輸出的長度是0。至于為什么輸出的this中有這個list，那是因為控制臺輸出物件時，輸出的是物件的參考地址。
當你展開輸出的物件時，它會在你點擊的時候去這個地址里取值，而這里你的那個請求賦值已經執行完了，所以這里才有的資料。
uj5u.com熱心網友回復：
建議你看一下vue的生命周期，你用的mouted，這個生命周期鉤子表示dom樹已經加載完成了，你那個length已經呼叫過一次，然而這時候你還沒有情求資料，所以最簡單干脆的是在created里面去呼叫方法，或者你在渲染的時候加個判斷，就是有值的時候渲染，沒有值的時候就先不渲染它uj5u.com熱心網友回復：
去看看JS資料型別吧。JS參考資料型別，你的categories定義后，它指向的位置沒變，等你去慢慢展開列印的this，它指向的內容早就被改變了。你的http請求延遲上10秒去執行，你再看看this。當你列印categories.length時，它就是當時的陣列長度。在陣列為空時，去獲取它的元素的屬性，就會報錯。
var arr= [];
console.log(arr);
setTimeout(function(){
arr.push({val: 1}, {val: 2});
},300)
列印出來的確實是空陣列，但展開后卻不是
uj5u.com熱心網友回復：
出錯的代碼影響渲染，鑒定完畢uj5u.com熱心網友回復：
放在created(){}試試uj5u.com熱心網友回復：
你這有兩個問題，一個是FOR list 最好不要用函式來回傳, undefine 這個是顯示問題，渲染前沒拿到資料，有兩種方法，this.$nextTick 里拿資料，或categories&&categories.length 這樣就沒問題了uj5u.com熱心網友回復：
在then里邊不能用this.categories;
用vue實體化物件的名字去找categories；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/28834.html
標籤：JavaScript