Sometimes, we want to handle enter key press in Vue.js.
In this article, we’ll look at how to handle enter key press in Vue.js.
How to handle enter key press in Vue.js?
To handle enter key press in Vue.js, we use the @keyup
directive.
For instance, we write
<div id="app">
<input @keyup.enter="onEnter" />
<h1>{{ msg }}</h1>
</div>
to set @keyup.enter
to the onEnter
method so that onEnter
runs when we press enter in the input.
enter
is modifier that makes the @keyup
directive only listens to enter key presses.
Conclusion
To handle enter key press in Vue.js, we use the @keyup
directive.