在for循環中過濾數組引發警告VueJS

-1

我不確定這是一個問題還是我做錯了什麼。使用VueJS，我有一個v-for內的過濾功能，並且工作正常，但它在控制檯中引發了一個警告，this是這個問題的一個最簡單的例子。你可以看到，我需要過濾來自不同數組的關係數據，因此函數getClan（）返回一個數組，所以我需要使用第一個元素的數據。到目前爲止好，但是當V-for循環結束我得到了這樣的警告：在for循環中過濾數組引發警告VueJS

[Vue warn]: Error in render function: "TypeError: this.clans.filter(...)[0] is undefined"

顯示Chrome和Firefox的控制檯上的消息，由於某種原因沒有codepen的本地控制檯上顯示，我猜這在某種程度上與警告分離。

該警告僅在for循環結束時發生，並且在嘗試使用大量數據時會發生同樣的情況。

考慮使用計算屬性，但不能在這些參數上傳遞參數。

來源

2017-11-11 deadPoet

以供將來參考，請提問自成體系，而不是取決於外部服務，如codepen或的jsfiddle（SO的片段工具做的一切他們這樣做，它確保問題不會因爲鏈接腐爛而變得不可用） –

好的，感謝您的建議，我想這是懶惰的，但您是對的，代碼不長，並且會提高問題的可讀性。 – deadPoet

當您的數組篩選器不匹配任何內容時會出現問題：您嘗試訪問返回的值的第一個索引，該索引不存在。

你需要進行檢查，看是否有結果，而不是：

getClan(x) { 
    var clan = this.clans.filter(clan=>clan.id==x) 
    if (clan.length > 0) { 
     return clan[0].name 
    } else { 
     return "Peasant" 
    } 
}

來源

2017-11-11 14:06:43

謝謝，這個很明顯。只需要做一點改動，因爲即使過濾器只有一個項目將條件改爲clan.length> 0並且可以工作，過濾器也會返回一個數組。 – deadPoet

@deadPoet哦，很好;我刪除了答案的錯誤部分，謝謝！ –

沒問題，我認爲問題是v-for指令中的過濾器調用，當它到達最後一個元素時，getClan（x）仍然得到一個空參數，這就是警告的原因，所以這應該解決問題，再次感謝。 – deadPoet

在for循環中過濾數組引發警告VueJS

回答

相關問題