0 votes
in VueJS by
What are key modifiers in VueJS?

1 Answer

0 votes
by
Vue supports key modifiers on v-on for handling keyboard events. Let's take an example of keyup event with enter keycode.

<!-- only call `vm.show()` when the `keyCode` is 13 -->

<input v-on:keyup.13="show">

Remembering all the key codes is really difficult. It supports the full list of key codes aliases

.enter

.tab

.delete (captures both “Delete” and “Backspace” keys)

.esc

.space

.up

.down

.left

.right

Now the above keyup code snippet can be written with aliases as follows,

<input v-on:keyup.enter="submit">

// (OR)

<!-- with shorthand notation-->

<input @keyup.enter="submit">

The use of keyCode events is deprecated and may not be supported in new browsers.

Related questions

0 votes
asked Feb 4, 2020 in VueJS by rajeshsharma
0 votes
asked Sep 9, 2023 in VueJS by AdilsonLima
...