Categories
Vue Answers

How to prevent form submission when pressing enter from a text input using Vue.js?

Spread the love

Sometimes, we want to prevent form submission when pressing enter from a text input using Vue.js.

In this article, we’ll look at how to prevent form submission when pressing enter from a text input using Vue.js.

How to prevent form submission when pressing enter from a text input using Vue.js?

To prevent form submission when pressing enter from a text input using Vue.js, we use the prevent modifier.

For instance, we write

<input type="text" v-on:keydown.enter.prevent="addCategory" />

to add a keydown event handler that only handles presses of the enter key.

And we prevent the default submit behavior with prevent.

addCategory is called when we press enter.

Conclusion

To prevent form submission when pressing enter from a text input using Vue.js, we use the prevent modifier.

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 *