More than 1 year has passed since last update.

【Vue.js】キー修飾子で特定のキー押下時にイベントを発生させる

Posted at 2023-11-06

はじめに

よくあるEnterキーで入力確定する方法を探していたら、キー修飾子があったので軽くまとめる。

特定のキーを押された場合に、指定したイベントが発火する。
そして、v-on:clickなどのイベントにドット（.）でつなげることができる。

右クリック押下時にaddイベント発生。

HTML

<button @click.right="add">Add</button>

左クリック押下時にaddイベント発生。

HTML

<button @click.left="add">Add</button>

inputの入力欄を選択しながら、エンターキー押下時にenterイベント発生。

HTML

 <input type="text" @input="setName" v-on:keyup.enter="enter" :value="name">

他にも使ったキー修飾子が出てきたら、随時追加予定。