本記事では、フォームの多重送信対策をVue.jsで実装する場合に、どういうオプションがあるか紹介します。Modifiers)という機能があります。思うかもしれませんが、これは使えません。once</button>このボタンは、文字通り1回しか押せません。.onceが内部的に何をやっているかというと、イベントハンドラが一度呼び出されたらハンドラを削除しています。}}https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/modules/events.js#L31-L39本当に1回だけしか押せなくしたい場合には.onceでよいでしょう。formのsubmitボタンは、バリデーションエラーが発生したら一度送信をキャンセルして非活性化、ユーザが入力値を修正したら活性化して再度押せるように、といった制御が必要です。そのため、.onceは、formのsubmitボタンには使えません。フォームコンポーネントに状態を持つ以下のように、フォームコンポーネントに処理中であることを示すフラグ(ここではthis.processing)を持たせると、処理を行っている間は別の処理が割り込めないようにできます。}}</script>ここでは、setTimeout()を使って、一度押したら1秒間は再度押すことができないようにしています。押せない間はボタンのdisabled属性を設定しておくと親切だと思います。多重送信しないボタンコンポーネント複数のフォームコンポーネントで多重送信対策を行う場合、処理の共通化をしたくなります。ここでは、Mixinの使用等、いくつかのオプションがあります。個人的にオススメなのは「多重送信しないボタンコンポーネント」の作成です。以下のようなbutton要素を拡張するコンポーネントを定義します。};</script>利用側は、以下のようになります。ポイントは、:onclickには、Promiseを返すメソッドの名前を書く、という点です。ように書けば、このtype属性は内部のbuttonに引き継がれます。そのため、静的な属性は普通に書くことができます。disabled属性は動的に値を書き換える可能性があるので、propsとして定義しています。まとめVue.jsでは、再利用性のある機能はコンポーネントに切り出すと、いい感じに書けると思います。明日はtakayamさんの「Nuxtで実案件で開発するときに作ったオレオレプラグイン」です。「こころに贅沢を」をコンセプトに一休.com、一休レストランなどのサービスを提供しています。upLoginユーザーは見つかりませんでした。