Help us understand the problem. What is going on with this article?

Vuetifyのv-btnをHTMLのbuttonタグに置き換えた時にハマったこと

何がおきたか

とあるプロジェクトで、Vue.jsのVuetifyを使っていたのだが
諸般の事情により、Vuetifyを使わなくなったので、途中までVuetifyで組んでいたものを
通常のHTMLタグに戻す、という作業をしていた時にちょっとハマったこと。

<v-form method="get" action="">

(いろいろなForm入力要素がここに入っている)

<v-btn @click="doSend">
送信する
</v-btn>
</v-form>

(doSend はこのボタンを押した後に処理されるメソッド)

これを、以下のように書き換えた。

<form method="get" action="">

(いろいろなForm入力要素がここに入っている)

<button @click="doSend">
送信する
</button>
</form>

すると、 doSend の処理が走らなくなってしまった。

原因と修正方法

Vuetifyの v-btn 要素は、実際には以下のようにレンダリングされる。

<button data-v-******* type="button">
送信する
</button>

type="button" が付与されるのがポイント。

一方、HTML要素の <button> タグは、type属性を指定しなかった場合、デフォルトは submit になる。

そのため、先程 <button> タグに置き換えた後、doSendメソッドが動作しなかったのは
clickイベントよりもsubmitイベントが優先されたため、
formaction要素に指定したURL(上の例では空文字だが、自分自身)へ遷移してしまったためだった。

修正としては、<button> タグに type="button" を指定すればよい。
あるいは、そもそもこの場合、JavaScriptで処理させてしまう(画面遷移させない)作りだったので
formのactionが作動しないよう、javascript:void(0)を指定する方法でもよいはず(こちらの方法は採用しなかった)。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away