【Vue】検索機能の二重送信防止

こんにちは、新人エンジニアの三上です。

今回は、Vueにおいて処理に時間がかかる機能（例として検索機能）を付加したボタンによる二重送信を防ぐ方法をご紹介いたします。

loading 属性

Vue: ver2.6.11

<template lang="pug">
    // 検索ボタン
    v-btn(@click="searchExample" :loading="searchLoading")
</template>

<script lang="ts">
    const searchLoading = false
    
    private async searchExample() {
        this.searchLoading = true
        // --検索処理開始--
        // --検索処理終了--
        this.searchLoading = false
    }
</script>

上記実装で検索ボタン押下により以下のような
ローディング状態のぐるぐるマークが表示されるようになります。

このローディング状態では、ボタンを押下することができないので
検索処理に時間がかかり、その検索処理中に再度検索ボタンが押下されるということがなくなります。
これにより、検索処理が2度実行されるような想定外の動作を防ぐことができます。
例）2回検索処理が実行されたために検索結果が2重で返ってくることがなくなる。

まとめ

以上のように、loading属性を使用することで2重送信による想定外の動作を防ぐことができます。

以上、三上でした。