Vue.js キー修飾子

v-onディレクティブで使用できるキー修飾子についての記事です。

キー修飾子

特定のキーに対応してイベントを呼び出すことができる。

よく使われる9種類に関してはVue.js側でエイリアスを用意してくれている。

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

公式ガイドによると

KeyboardEvent.key で公開されている任意のキー名は、ケバブケースに変換することで修飾子として直接使用できます。

とのことで試してみたところ他のものも簡単に扱えました。

以下はエイリアスを使用した場合のサンプルコードです。

エンターキーを打つと結果を表示させたりする時など、使用したいシーンは多くありそうです。

とても手軽に実装できるのは嬉しいですね。