v-formの中にv-text-fieldを配置すると、エンターキーでページがリロードされる問題を解決する

どういうコードで起きるか

Vuetifyでフォームを実装時に

 <v-form ref="form">
        <v-text-field></v-text-field>
        <v-btn @click="submit">提出</v-btn>
 </v-form>

このように、１つのテキストフィールドがあり、 v-btnを使用している場合に起こる。

原因

実はHTMLの仕様。

v-form、v-btn コンポーネントを利用していると、 v-btnがtype="button" となる。

よって、テキストフィールドがあり、submitボタンがない状態のため 、Implicit submission （暗黙の submit）という HTML の仕様により、エンターキーで submit され、リロードされてしまう。

解決法

以下のv-formのタグ内の記述でsubmitイベントを抑える

<v-form ref="form" @submit.prevent>

こちらでエンターキーでの submit イベントを抑え、ボタンを押したときのみクリックイベントで発火するようにする。

また、追加のコードで、

<v-text-field @keyup.enter="Method"></v-text-field>

以上のようにすれば、入力中のエンターキーの挙動を合わせて実装できる。

Methodのところをv-btnと同じメソッドにすれば、ボタンを押したときと同じ挙動にできる。

参考文献