Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8644

vue.jsにおけるエンターキー押下時の挙動をハンドリングする

$
0
0

解決したい課題

エンターキー押下時に、ボタン押下と同じ挙動にしたい。

課題の詳細

内にが2つある場合、の韻字的なtype="button"が2つになってしまい(ここは仮定)
意図していないがエンターキーでsubmitがされない状態。

結論

※参考
https://qiita.com/sd131/items/06e13b5008efc41102d1
※参考サイトからの引用
v-form、v-btnコンポーネントを利用していると、 v-btnがtype="button" となる。
よって、テキストフィールドがあり、submitボタンがない状態のため 、Implicit submission (暗黙の submit)という HTML の仕様により、エンターキーで submit され、リロードされてしまう。

従って、そのtext内でエンターキーによるsubmitを有効化したいときは、
その内にkeyイベントを以下のように追加してあげれば良い。

<v-text-field>
@keydown.enter="submit"
</v-text-field>

keydownとkeyupとkeypressの違いは以下がわかりやすい。
https://murashun.jp/blog/20191110-52.html

vuetify.jsのbuttonイベントについては以下にかなりまとまっている。
公式:https://v15.vuetifyjs.com/ja/components/buttons/
Qiita:https://qiita.com/rubytomato@github/items/890d59804978aa959e9c

Qiita、すげーな。。。


Viewing all articles
Browse latest Browse all 8644

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>