如何解決vue項(xiàng)目中頁(yè)面調(diào)用數(shù)據(jù)在數(shù)據(jù)加載完畢之前出現(xiàn)undefined的問(wèn)題

這篇文章主要介紹如何解決vue項(xiàng)目中頁(yè)面調(diào)用數(shù)據(jù)在數(shù)據(jù)加載完畢之前出現(xiàn)undefined的問(wèn)題，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在項(xiàng)目中遇到后臺(tái)數(shù)據(jù)還沒(méi)有加載完畢，但是頁(yè)面上調(diào)用了后臺(tái)數(shù)據(jù)中的字段，這樣就會(huì)報(bào)undefined。

例如：一進(jìn)入頁(yè)面直接回顯數(shù)據(jù)。

我在created里面請(qǐng)求接口進(jìn)行賦值 this.matterAll=[];

會(huì)報(bào)accessItemName為undefined；

原因以及解決辦法：

在上面data()中，我定義了matterAll:[],也就是空的數(shù)組，

template中，我又直接用了this.matterAll[0]，這個(gè)時(shí)候this.matterAll[0]=undefined，所以this.matterAll[0].accessItemName也是undefined，

需要注意的是，是先進(jìn)行頁(yè)面渲染再獲取數(shù)據(jù)，也就是數(shù)據(jù)還沒(méi)到就會(huì)渲染一次，數(shù)據(jù)到了再渲染一次，第一次渲染的時(shí)候就報(bào)錯(cuò)了。

data()中 設(shè)置一個(gè)空的值或者自定義的值，在數(shù)據(jù)到達(dá)之前顯示這個(gè)值

例：matterAll:[{accessItemName:""}]，還有一個(gè)辦法，在綁定數(shù)據(jù)的標(biāo)簽上加“v-if='要回顯的字段名'”，也就是當(dāng)需要顯示的數(shù)據(jù)存在時(shí)才顯示。

以上是“如何解決vue項(xiàng)目中頁(yè)面調(diào)用數(shù)據(jù)在數(shù)據(jù)加載完畢之前出現(xiàn)undefined的問(wèn)題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！