2017-11-11 7 views
-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循環結束時發生,並且在嘗試使用大量數據時會發生同樣的情況。

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

+0

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

+0

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

回答

1

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

你需要進行檢查,看是否有結果,而不是:

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

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

+0

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

+0

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