鍍金池/ 問答/HTML/ 想請教一個獲取到數(shù)據剛開始顯示，刷新頁面后報錯的問題

想請教一個獲取到數(shù)據剛開始顯示，刷新頁面后報錯的問題

clipboard.png

<el-col :span="6">
  <p>訂單編號：<span>{{ApsInfo}}</span></p>
</el-col>

<el-col :span="6">
  <p>客戶名稱：<span>{{ApsInfo}}</span></p>
</el-col>

<el-col :span="6">
  <p>產品名稱：<span>{{ApsInfo}}</span></p>
</el-col>

這是頁面的代碼和頁面顯示的內容，ApsInfo中的數(shù)據都能夠完整的返回出來。

clipboard.png

<el-col :span="6">
  <p>訂單編號：<span>{{ApsInfo.OrderNO}}</span></p>
</el-col>

<el-col :span="6">
  <p>客戶名稱：<span>{{ApsInfo.CrdName}}</span></p>
</el-col>

<el-col :span="6">
  <p>產品名稱：<span>{{ApsInfo.ItmName}}</span></p>
</el-col>

這個選擇ApsInfo里面的屬性值之后的代碼和返回的樣式，這樣子頁面刷新一切都正常。

clipboard.png
但是在頁面中按F5之后頁面就開始報這個錯誤了，也無法進入頁面。但只要不獲取ApsInfo下面的屬性就不報錯，如圖一，被這個問題困擾了好久不知道是什么原因。

如果表述的不夠清楚，可以留言問我！

回答
編輯回答
神經質

你這是一個對象，在data里把對象的屬性補齊就行了

2018年5月31日 21:13
編輯回答
厭遇

樓上說的對。
你data里數(shù)據層級只時候聲明到ApsInfo 頁面請求數(shù)據是異步的。頁面綁定數(shù)據ApsInfo.OrderNO,此屬性還未獲取到。
解決辦法
1.data里聲明到OrderNO
2.v-if 。<p v-if="ApsInfo.OrderNO">產品名稱：<span>{{ApsInfo.OrderNO}}</span></p>
3.

this.$nextTick(function(){
        this.reqData(); //請求數(shù)據
   });
 【注：第三個方法沒試過，你可以先試試】
2017年7月15日 07:02
編輯回答
鐧簞噯

由于是異步獲取數(shù)據，Vue 組件在初始化組件的時候 ApsInfo 為默認值。按照你的情況應該是并沒有給予 ApsInfo 完整的默認值，可以設置為：

data() {
    return {
        ApsInfo: {
            OrderNO: '',
            CrdName: '',
            ItmName: ''
        }
    }
}

Vue 文檔中提到：

由于 Vue 不允許動態(tài)添加根級響應式屬性，所以你必須在初始化實例前聲明根級響應式屬性，哪怕只是一個空值。

雖然其中講到的是另外一個問題，但是我們應該始終在 data 中初始化所有可能的值。

2018年6月29日 00:20