# キーコード修飾子
breaking

# 概要

変更点の概要は以下です:

  • 破壊的変更: v-on 修飾子にキーコードの数字を利用することはサポートされなくなりました
  • 破壊的変更: config.keyCodes の利用はサポートされなくなりました

# 2.x での構文

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

# 3.x での構文

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

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

<!-- Matches both q and Q -->
<input v-on:keypress.q="quit">
1
2
3
4
5

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

# 移行の戦略

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

一部の句読点のキーは、文字のまま含めることができます。例えば、, キーでは:

<input v-on:keypress.,="commaPress">
1

構文の制限のため "'/=>. といった特定の文字はマッチしません。それらの文字については、代わりにリスナの中で event.key をチェックする必要があります。

移行ビルドのフラグ:

  • CONFIG_KEY_CODES
  • V_ON_KEYCODE_MODIFIER