VueJS：在等待異步數據庫調用結果時使用加載圖標

Question

我想知道在我的站點所依賴的數據尚未準備就緒的情況下以及如何在VueJS中設置加載圖標。

你知道如何做到這一點嗎？

會很好，樂於助人。

Answer 1

考慮你正在使用愛可信這是目前vue.js最常用的HTTP客戶端，你會做這樣的事情

data: function() { 
    return { results: [], loading: false }; 
} 

現在假設您加載上創建

created: function() { 
    this.loading = true; 

    axios.get('/path/to/my/data/endpoint') 
    .then(function(response) { 
     this.result = response.data; 
     this.loading = false; 
    }.bind(this)) 
    .catch(function() { 
     this.loading = false; 
    }.bind(this)); 
} 

而且在你的模板你有類似的東西

<img src="/path/to/my/loading/icon" v-if="loading" /> 

<ul v-else> 
    <li v-for="result in results"> ... </li> 
</ul>