如何處理（現在）缺失的數據？

Question

摘要：我顯示了一些我從API獲得的數據。由於調用的異步性質和各種刷新率，我不能認爲當我從HTML代碼調用它時，我的Vue對象中的data將可用。 有沒有辦法處理Vue.js中的缺失數據？

詳細說明：

下面的代碼工作因爲message.text在Vue實例的編譯時的定義（輸出hello world）：

var vm = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    message: { 
 
     text: "hello" 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 

 
<div id="root"> 
 
    <span>{{message.text}}</span> 
 
    <span>world</span> 
 
</div>

如果message被定義通過外部行動（a調用例如一個API），那麼下面的代碼將會失敗：

var vm = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 

 
<div id="root"> 
 
    <span>{{message.text}}</span> 
 
    <span>world</span> 
 
</div>

我今天使用的解決方案是爲將之前被渲染的data位佔位符（默認值）我有機會用真實值更新它們，但是當data變得複雜時，這會使我的代碼變得複雜（並且醜化）我的代碼。

有沒有辦法指示Vue.js在達到data未定義（尚未）定義的元素時自動失敗？

Answer 1

您可以使用v-if，而不是直到數據被加載，就像下面呈現的div：

var vm = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    message: {} 
 
    }, 
 
    mounted() { 
 
    var vm = this 
 
    setTimeout(function(){ 
 
     vm.message = {'text' : 'Hello'} 
 
    }, 400) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 

 
<div id="root"> 
 
    <div v-if="message.text"> 
 
    <span>{{message.text}}</span> 
 
    <span>world</span> 
 
    </div> 
 
</div>

如果您知道message數據的結構，你可以先初始化它空字符串，並不需要任何v-if或其他機制來防止此錯誤。

var vm = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    message: { 
 
     text: '' 
 
    } 
 
    }, 
 
    mounted() { 
 
    var vm = this 
 
    setTimeout(function(){ 
 
     vm.message.text = 'Hello' 
 
    }, 400) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 

 
<div id="root"> 
 
    <div> 
 
    <span>{{message.text}}</span> 
 
    <span>world</span> 
 
    </div> 
 
</div>

Answer 2

你可以只聲明瞭一個變量asyncData當數據進來更新它，如果你宣佈一個空對象的鍵不存在Vue公司不會引發錯誤：

var vm = new Vue({ 
    el: '#app', 
    data: { 
    asyncData: {} 
    } 
}); 

然後當數據到達時，你可以設置它，並迫使Vue的情況下重新渲染：

// Receive data 
vm.asyncData['message'] = "Hello World!"; 
vm.$forceUpdate(); 

這裏的的jsfiddle：https://jsfiddle.net/tvzjsb7e/