Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Handle DOM Events in Vue.js with v-on

1:06 JavaScript lesson by

v-on can be used to handle interaction with elements in your template. Modifiers like stop and prevent can be used in place to preventDefault() and stopPropagation. Vue.js can also capture key bindings such as v-on:keyup.enter and v-on:keyup.13.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

v-on can be used to handle interaction with elements in your template. Modifiers like stop and prevent can be used in place to preventDefault() and stopPropagation. Vue.js can also capture key bindings such as v-on:keyup.enter and v-on:keyup.13.

Here we have a button. Let's add v-on:click, and set that ="total += 1." Now, when we click the Add Dinosaur button, our total is incremented by one. We'll add an input field of type="number" and set v-model to the "amount" attribute on our component.

Let's change our click event on the button to "addDinos". Now, we can type a number into the input field, and click the button to add that amount to our total. Let's change our button text to reflect the amount of Dinosaurs being added. We want to make it so that the user can just press enter from the input field, to add that amount of Dinosaurs.

Let's add v-on:keyup.enter, and set it equal to "addDinos." Let's make this more accessible by wrapping these elements in a form element. On our form, let's add v-on:submit="add Dinos."

We can remove the events from the button and the input field, since the form will be taking care of those. In order to prevent the default action of the form, we can use the event modifier prevent.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?