VueJS：非同期データベース呼び出しの結果を待つ際の読み込みアイコンの使用

Question

私のサイトが依存しているときに、VueJSに読み込みアイコンを設定する場所と方法が不安です。

あなたはこれを行う方法を知っていますか？

すてきで便利です。あなたは

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)); 
} 

そして中にロードするとしましょうでしょう、現在vue.jsための最も使用されるHTTPクライアントであるaxiosを使用している考慮

Answer 1

あなたのテンプレートはあなたのようなものを持っています

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

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