Categories
Vue Answers

How to handle enter key press in Vue.js?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *