# キーコード修飾子
breaking

# 概要

変更点の概要は以下です

Vue 2では、v-onメソッドでキーコードを利用することができました。

<!-- キーコードを利用した場合 -->
<input v-on:keyup.13="submit" />

<!-- エイリアスを利用した場合 -->
<input v-on:keyup.enter="submit" />

1
2
3
4
5

さらに、config.keyCodesのグローバルオプションを利用することで、独自のエイリアスを定義できました。

Vue.config.keyCodes = {
  f1: 112
}

1
2
3

<!-- キーコードを利用した場合 -->
<input v-on:keyup.112="showHelpText" />

<!-- 独自のエイリアスを利用した場合 -->
<input v-on:keyup.f1="showHelpText" />

1
2
3
4
5

KeyboardEvent.keyCode は非推奨 (opens new window)となり、Vue 3においても引き続きサポートすることはもはや意味がありません。そのため、修飾子に利用したいキーのケバブケース名を利用することが推奨されます。

<!-- Vue 3 の v-on でキー修飾子を利用する場合 -->
<input v-on:keyup.delete="confirmDelete" />

1
2

config.keyCodesの利用も同様の理由で非推奨となり、サポートされなくなりました。

キーコードを利用している場合は、ケバブケースでの命名に変更することを推奨します。