えー、本日のがっかりしょぼん記事です。あまりにも恥ずかしい話ではありますが、同じことでつまづいた人が私以外にもきっといるはずというかいてくれるといいなーというか、まぁそんな感じで記事として残して起きます。
本日の大事なこと
.onceは思っていた多重クリック対策とは違った！.onceは思っていた多重クリック対策とはちがった！
大事なことなので2回言いました。
何が起きたのか
Vue.jsでメールフォームを作ってたのですが、無事にメールが送れるようになった後、validationを入れたら動かなくなりました。
ページをロードした後1回目にvalidationに引っかからないようにフォーム送信すると成功するのですが、一度validationに引っ掛けてもう一度フォームを送信しようとすると、自動的にページがリロードされてしまうのです。e.preventDefault()を効かせているのにも関わらず。
pデバッグで頑張ってみたところ、1回送信ボタンを押すと、そこに関連付けた関数が消えているとしか思えない挙動をするのです。
何が起きていたのか
さて、もうお分かりですね。
そう、送信ボタンに.onceのイベント修飾子を付けていたのでした……。
多重クリック防止策だと思って便利だなー、とか思いながら付けていたのですが、これは1回v-onが起動した後、そこに関連付けられた関数を削除してしまうのです。
参考：[Vue.js] フォームの多重送信を防止する
思った通りの原因でしたが、思ってもなかった原因でした。
validationは問題なかったようです。
私が思っていた多重クリック防止策
ちなみに、私が実現したかった多重クリック防止策はこちらの記事で実現できました。多謝。