Vue.js

Vue.jsでキーの入力に合わせてイベント実行

Vue.jsでキーバインディングとか調べるとイベントハンドリングの方のkeydownばっかり出てきてちょっと悩んだ。

mountedの中でonkeydownイベント設定しちゃうのが良さそう。
ちなみにkeyCodeは非推奨らしいのでkeyで判定する。
例えば
「↑」:「ArrowUp」
「delete」:「Backspace」
みたいな感じ。
対応キーは下のサイトが調べやすくてよかった
JavaScript Event KeyCodes

?
1
2
3
4
5
6
7
8
9
10
11
12
mounted() {
 document.onkeydown = (e) => {
  if (e.key === 'ArrowUp') {
   this.keyDownEvent();
  }
 }
},
methods: {
 keyDownEvent() {
  console.log("↑押されたで");
 }
}