KeyCode Modifiers

Overview

Here is a quick summary of what has changed:

  • BREAKING: Using numbers, i.e. keyCodes, as v-on modifiers is no longer supported
  • BREAKING: config.keyCodes is no longer supported

2.x Syntax

In Vue 2, keyCodes were supported as a way to modify a v-on method.

  1. <!-- keyCode version -->
  2. <input v-on:keyup.13="submit" />
  4. <!-- alias version -->
  5. <input v-on:keyup.enter="submit" />

In addition, you could define your own aliases via the global config.keyCodes option.

  1. Vue.config.keyCodes = {
  2.   f1: 112
  3. }
  1. <!-- keyCode version -->
  2. <input v-on:keyup.112="showHelpText" />
  4. <!-- custom alias version -->
  5. <input v-on:keyup.f1="showHelpText" />

3.x Syntax

Since KeyboardEvent.keyCode has been deprecatedKeyCode Modifiers - 图1, it no longer makes sense for Vue 3 to continue supporting this as well. As a result, it is now recommended to use the kebab-case name for any key you want to use as a modifier.

  1. <!-- Vue 3 Key Modifier on v-on -->
  2. <input v-on:keyup.delete="confirmDelete" />

As a result, this means that config.keyCodes is now also deprecated and will no longer be supported.

Migration Strategy

For those using keyCode in their codbase, we recommend converting them to their kebab-cased named equivalents.