O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Key modifiers

If you hit Enter when you focus on one of the inputs, you will notice that the page reloads again instead of calculating. This happens because we have prevented the behavior of the submit button but not of the inputs.

To fix this, we have to use key modifiers:

<input v-model="a" @keyup.enter="calculate">
<input v-model="b" @keyup.enter="calculate">   

Tip

When you have a form with a lot of inputs, buttons, and many more and you need to prevent their default submit behavior, you can modify the submit event of the form. Example: <form @submit.prevent="calculate">.

Finally, the Calculator is up and running.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required