【Vue】投稿中にLoading画面を追加

前書き

投稿処理にどうしても時間がかかってしまう為、
記事を投稿中、Loading画面を追加しました。

参考資料

非常にわかるやすいです！
'vue-loading-overlay'の使い方について
www.kabanoki.net

実装（Post.vue）| 投稿ページ

import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

まずはloading画面をoverlayで動作してくれるモジュールをインポートします。
非常に便利ですね。cssもお忘れなく。

data() {
   return { isLoading: false, }
},
components: {
    loading: Loading
  },
methods: {
    createMap() {
        this.isLoading = true;
       
        // 投稿処理

        uploadImage(this.imageFile, this.data.ID)
          .then(() => {
            postData(this.data);
          })
          .then(() => {
           // 投稿処理が終了したので、loading画面を解除
            this.isLoading = false;
            router.push("/");
          })
          .catch(() => {
            // 投稿処理が終了したので、loading画面を解除
            this.isLoading = false;
            alert("投稿に失敗しました");
          });
      } 
    },

投稿ボタンをclickすると、methodsが発動して投稿処理が開始されます。
投稿処理中はisLoadingをTrueにして、画面全体にLoading画面が表示されます。
'vue-loading-overlay'から読み込んだLoadingを使って、Component化します。

 <loading :active.sync="isLoading" :can-cancel="true" :is-full-page="true"></loading>

Vueファイルのテンプレートタグ内に貼り付け、動作させます。

結果

投稿前

投稿中