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.