javascript - vue透過props傳遞物件會報錯
phpcn_u1582
phpcn_u1582 2017-05-19 10:42:21
0
5
870

父元件App.vue

#子元件sonCp.vue

資料結構

報錯但是資料能渲染上去

#求解,順便幫我看一下我取資料方式對麼,是放到created這個裡面麼

phpcn_u1582
phpcn_u1582

全部回覆(5)
伊谢尔伦

子元件最初得到的是空字串,木有.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: [],這樣也語意表達上也明確。

为情所困

雷雷

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!