vue中父組件通過props向子組件傳異步值爲空

問題:子組件在使用props接收父組件傳值的時候,瀏覽器報錯該對象未定義

父組件:

子組件:

控制檯:

原因:

當父組件通過 axios 獲取數據,子組件使用 props 接收數據時,子組件執行 mounted 的時候,父組件的axios 還沒有返回數據,而且 mounted 只執行一次,這時  props 中接收的數據爲空,所以在使用的使用自然會報錯undefined

思路:

給props接收的參數一個初始空值(不知道思路問題還是啥,這個並沒有解決問題)

最終解決方法:

1、使用v-if判斷(親測可用)

2、使用watch監聽(未實現)watch使用場景:父組件發生數據變化,動態的傳遞給子組件,子組件實時刷新視圖

 

由於瀏覽器報錯爲data.address未定義,所以只要在使用data.address的地方加上判斷v-if,data.address不爲空的時候才渲染

注:當props中接收的參數爲數組時,判斷數組長度即可,v-if="xxx.length"

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章