We're not limited to simply using the enter modifier, we also have access to a variety of shorthand modifiers, for example the use of the @ symbol and shortening v-on:event.name v-on: by replacing it with the @ symbol. Other shortening methods include:
- @ is the same as v-on:
- @keyup.13 is the same as @keyup.enter
- @key* can be queued, such as @keyup.ctrl.alt.delete
Other modifiers can be seen in the following table:
Name | Description | Code Example |
.enter | Whenever the Enter key is tapped. | <input v-on:keyup.enter="myFunction" /> |
.tab | Whenever the Tab key is tapped. | <input v-on:keyup.tab="myFunction" /> |
.delete | Whenever the Delete or Backspace key is tapped. | <input v-on:keyup.delete="myFunction" /> |
.esc | Whenever the Esc key is tapped. | <input v-on:keyup.esc="myFunction" /> |
.up | Whenever the up arrow key is tapped. | <input v-on:keyup.up="myFunction" /> |
.down | Whenever the down arrow key is tapped. | <input v-on:keyup.down="myFunction" /> |
.left | Whenever the left arrow key is tapped. | <input v-on:keyup.left="myFunction" /> |
.right |
Whenever the right arrow key is tapped. |
<input v-on:keyup.right="myFunction" /> |