如何避免在初始化過程中提供虛擬Vue數據結構？

在我的Vue驅動的HTML我也行如何避免在初始化過程中提供虛擬Vue數據結構？

<span>Last updated on {{incident.LastUpdate[0].date}}</span>

在Vue實例data被定義爲

data: { 
    incident: {} 
}

在執行過程中，incident是asynchonously加載，但在初始頁面中我看到的負載

[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined" 
(...) 
TypeError: Cannot read property '0' of undefined

這是可以理解的，因爲incident內容尚不可用。當它們可用時，頁面顯示正確。因此，錯誤是預測和暫時的，所以我可以忘記它。然而

我想沉默，並與一些虛擬數據

data: { 
     incident: { 
      LastUpdate: [ 
       { 
        date: null 
       } 
      ] 
     }, 
    },

現在的錯誤消失初始化incident但我覺得這是解決這尷尬的方式。如果有更多的數據需要初始化，它也會變得很麻煩。

我的問題：在Vue中處理這個問題的正確方法是什麼？像我的修復程序中的虛擬數據？

來源

2017-10-17 WoJ

我看到一些其他框架相同的行爲，哪怕只是很短的時間，但確確實實得到顯着當網頁載入慢.. – StefanE

我通常包用一個''或其他標誌確定是否顯示某些數據的某些異步數據的內容 –

聲明一個空數組。它將幫助其他開發人員瞭解您的數據結構
儘可能保持您的標記邏輯較少。使用Computed方法檢索第一個值，並進行錯誤處理。

看到代碼：

<template> 
    <div> 
     Last updated on {{lastUpdatedTime}} 
    </div> 
</template> 
<script> 
export default { 
    data(){ 
     return { 
      incident: { 
       lastUpdate:[] 
      } 
     } 
    }, 
    computed: { 
     lastUpdatedTime() { 
      if (this.incident.LastUpdate.length === 0) return '' // think about a default please :) 
      return this.incident.LastUpdate[0].date 
     } 
    } 

} 
</script>

來源

2017-10-17 19:01:48 LiranC

這些都是好的一點，謝謝。特別是第二個是一個整潔的修復（確實是一個好的方法）。 – WoJ

如何避免在初始化過程中提供虛擬Vue數據結構？

回答

相關問題