Use basic event handling in Vue

Rory Smith
InstructorRory Smith
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

Let's use a range of events and their modifiers to look at the cool ways we can deal with event handlers in Vue.

[00:01] Let's start by setting up a data value called "counter." Then in our template, we can set up a button with a click event, which increments that value.

[00:13] Then, we'll show the value below. Now when we click the button, the counter updates. We can use other event types here apart from click. For example, mouse center.

[00:22] We can also use an event handler to trigger a method. Let's set up an increment method, which shows a console log to us and then increments the counter.

[00:33] Then, we can set up a button in our template, which triggers the increment method that we just made. Now, we can see that the value updated and we got a console log.

[00:44] Let's try out something else. We'll set up a firstName value in our data, then let's make a logName method, which is just going to log the value that we just made. In our template, we can set up a form. When the submit event is fired, it's going to fire the method that we just created.

[01:05] Within this form, we're going to set an input, which is bound to the firstName value that we made. When it changes in the input, it's going to change in our data too. Let's try out with an example name and we'll fire the submit. As you might expect, the entire page refreshes.

[01:24] The usual way to deal with this is to use "prevent" default method of the event. That works fine, but in Vue, you can go up to your template and attach the "prevent" modifier. That handles it for us.

[01:39] Aside from prevent, there's also "stop," which refers to stop propagation and several more including the "once" modifier, which will ensure that the event is only fired once.

[01:50] Lastly, let's take a look at key modifiers. We'll set up a keyHandler method, which sets our firstName value to "Evan." In our input, we can set a "keyup" event.

[02:04] Then, we can simply refer to the keys that we want to use to fire the event that we want. Now, when we press Ctlr + Alt + Shift + Down within our input, it's going to fire the keyHandle method.

egghead
egghead
~ 31 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today