84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
父元件App.vue
#子元件sonCp.vue
資料結構
報錯但是資料能渲染上去
#求解,順便幫我看一下我取資料方式對麼,是放到created這個裡面麼
子元件最初得到的是空字串,木有.acount.name之類的屬性,所以出錯。
最簡單的解決方法:
父元件App.vue中的
<sonCp :dataObj="dataObj" />
改成:
<sonCp :dataObj="dataObj" v-if="dataObj" />
非同步請求的資料是會渲染兩次的!第一次是請求沒完成時,這時候obj是你回傳的''。然後子組件去取值,一定發生錯誤呀!第二次才是請求返回,然後才有資料。所以解決方式就很明顯了,有很多種解決方式。
初始時dataObj是空字符,所以傳到子組件一定會報錯,可以透過v-if判定下是否已取到數據,取到之後再進行渲染。
一、如樓上所述,在dom中透過v-if判斷dataObj.length,保證在有資料情況下的渲染(推薦!!)
二、提前在父元件data選項中設定好dataObj物件的資料結構,例如:
data() { return { dataObj: { id: '', account: { name: '', age: '' } } }; }
另外建議樓主盡量在data選項中預留初始項時選擇合適的資料類型賦默認值,例如父組件中dataObj要存放的是數組類型,盡量dataObj: [],這樣也語意表達上也明確。
dataObj: []
雷雷
子元件最初得到的是空字串,木有.acount.name之類的屬性,所以出錯。
最簡單的解決方法:
父元件App.vue中的
改成:
非同步請求的資料是會渲染兩次的!第一次是請求沒完成時,這時候obj是你回傳的''。然後子組件去取值,一定發生錯誤呀!第二次才是請求返回,然後才有資料。所以解決方式就很明顯了,有很多種解決方式。
初始時dataObj是空字符,所以傳到子組件一定會報錯,可以透過v-if判定下是否已取到數據,取到之後再進行渲染。
一、如樓上所述,在dom中透過v-if判斷dataObj.length,保證在有資料情況下的渲染(推薦!!)
二、提前在父元件data選項中設定好dataObj物件的資料結構,例如:
另外建議樓主盡量在data選項中預留初始項時選擇合適的資料類型賦默認值,例如父組件中dataObj要存放的是數組類型,盡量
dataObj: []
,這樣也語意表達上也明確。雷雷