ロング（非AJAX）機能のインジケータをロードしていますか？

Question

私は、私のVueアプリで、完了するまでにある程度の時間（約2〜3秒）がかかる機能を持っています。 ではなく、でAJAX呼び出しです。

このコードの実行中にローディングインジケータを含めたいと思いますが、問題が発生しています。私は次のことができると思った...

<div v-on:click="doThings()">{{stuff}}</div> 

methods: { 
    doThings: function() { 

     this.loading = true 
     console.log(this.loading) 

     longFunction() 

     this.loading = false 
     console.log(this.loading) 

    }... 
} 

...しかしそれは動作しません。 doThings（）はlongFunction（）が終了するまで何も実行していないようです。私は別の機能を作り、ボタンを変えてこのような2つの機能を実行しようとしました...

...しかしこれも動作しません。私がしようとしていることは可能ですか？

Answer 1

longFunction（）の非同期コードを使用し、確定メッセージが解決された後にthis.loadingをfalseに設定します。

<div v-on:click="doThings()">{{stuff}}</div> 

methods: { 
    doThings: function() { 
     this.loading = true 
     longFunction().then(() => { 
      this.loading = false 
     }) 
    } 
} 

var longFunction = function() { 
    return new Promise((resolve, reject) => { 
    window.setTimeout(()=>{ // force a new (pseudo)thread 
     // do stuff, then 
     resolve() 
    },100); // ...some reasonably short interval. One millisecond is working for me when testing locally, but it might be better to include some extra buffer, to ensure Vue is in its next tick 
    }); 
} 

また、あなたはそのあなたのVueのコンポーネントが上の変更のためのwatchをすることができ、そしてバックにはfalseにloadingを設定することができるコンポーネントに信号としてそれを使用longFunctionへのオブジェクト参照を渡すことができます。