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