解決vue項(xiàng)目中頁面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問題
在項(xiàng)目中遇到后臺(tái)數(shù)據(jù)還沒有加載完畢，但是頁面上調(diào)用了后臺(tái)數(shù)據(jù)中的字段，這樣就會(huì)報(bào)undefined。
例如：一進(jìn)入頁面直接回顯數(shù)據(jù)。
我在created里面請求接口進(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)行頁面渲染再獲取數(shù)據(jù)，也就是數(shù)據(jù)還沒到就會(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)目中頁面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
基于Vue uniapp實(shí)現(xiàn)貪吃蛇游戲
貪吃蛇游戲想必是很多70、80后的回憶，一直到現(xiàn)在也深受大家的喜歡。本文將利用Vue+uniapp實(shí)現(xiàn)這一經(jīng)典的游戲，感興趣的可以了解一下2022-04-04
vue實(shí)現(xiàn)移動(dòng)端多格輸入框
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端多格輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)舉例詳解
最近工作遇到個(gè)需求,表單可以進(jìn)行增加刪除操作,需要進(jìn)行表單校驗(yàn),這篇文章主要給大家介紹了關(guān)于elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue項(xiàng)目實(shí)現(xiàn)token無感刷新的示例代碼
最近在使用系統(tǒng)的過程中，業(yè)務(wù)人員反饋剛登錄一會(huì)就提示token過期需要重新登錄，所以本文為大家分享一個(gè)無感刷新的實(shí)現(xiàn)代碼，需要的可以參考下2023-07-07
這篇文章主要為大家介紹了c++游戲教程使用easyx實(shí)現(xiàn)大飛機(jī)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了寫一個(gè)Vue Popup組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了vue 配置多頁面應(yīng)用的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
本篇文章主要介紹了vue-router跳轉(zhuǎn)頁面的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02