Events

Building apps usually requires you to allow the users to interact with it; maybe they are clicking buttons, dragging stuff around, using certain keyboard combinations, etc. All of these actions generate (trigger) events that you can handle in your app.

TIP

Here is the official docs regarding event handling.

Buy one tip for the price of two and get the second free!!!

If you wanted to know more about the native DOM events, which of those exist and can be available in your app, you can read that here.

Event Handling

So the first thing to take care is how to handle these events.

Remember our friend v-on, aka @ directive? It's going to start shinning in a bit.

Let's say that you want to know when a user has clicked on a button on your app.

The template portion of the app, would need to implement the aforementioned @ directive, alongside the event we are interested in; in this case click.

<button id="my-button"
    name="myButton"
    @click="onClickHandler"
    />

And the definition for that onClickHandler on line 3 is going to be in fact.... you guessed it again! A method. You're good, I'm telling you.

new Vue({
    ...
    methods: {
        ...
        onClickHandler() {
            // do some stuff here
        }
        ...
    }
    ...
})

We touched on this when introducing @ on the directives section, but I hope now it makes more sense what is actually happening here.

Modifiers

I wanted to throw this one in here in case you didn't go to the official docs right away.

If event.preventDefault() or perhaps event.stopPropagation() ring a bell at all, you know they can be handy sometimes. If not, well.. now you know 😬

You could access the native (DOM) event itself in a special variable Vue exposes called $event like so:

<submit id="my-button"
    name="myButton"
    @click="onSubmitHandler('other data', $event)"
    />

Then, on your method definition grab a hold of it:

new Vue({
    ...
    methods: {
        ...
        onSubmitHandler( otherParam, event ) {
            // `otherParam` == 'other data'
            event.preventDefault()
        }
        ...
    }
    ...
})

But! you could also use a modifier. A little feature that Vue has to make our lives easier and happier.

Check this out:

<submit id="my-button"
    name="myButton"
    @click.prevent="onClickHandler('other data', $event)"
    />

Sweet. There is quite a bit more stuff you can do on the template regarding modifiers though, I strongly recommend checking out the link from the first tip.

Communicating components

What happens when you want have some sort of communication between components you created for your app? You can't just go building isolated components that don't interact with others. Wouldn't make sense in most of the cases.

Enter events.

These are a bit different from the native DOM ones though. I call these synthetic events, since they are produced by the app and not necessarily by the DOM itself.

Example

Let's see how that might look like. Let me tell you what is going on on the pen below:

We have our main instance that implements a child blog-post component.

The blog-post component consists -among other elements- in a button that sends upwards a signal so that the parent (the main instance in this case) can act upon it.

That part of the code looks like:

...
<!-- Emitting the event from inside the component -->
<!-- Note we are sending a "payload" with the increment size -->
<button @click="$emit('enlarge-text', 0.3)">
Make bigger
</button>
...

And on the parent, we catch the event and do something about it, first by listening to it using good old @ and notice it is followed by the name of the event: enlarge-text.

 <!-- "listening" on a synthetic event, triggered from the inner button -->
  <blog-post v-for="post in posts"
    :key="post.id"
    :post="post"
    @enlarge-text="updateSize"
    ></blog-post>

After that, it is a matter of implementing the updateSize method in the main instance definition:

...
methods: {
      // when implementing the handler on the parent,
      // we can read the payload as an argument to the method
      updateSize(increment) {
          this.postFontSize += increment;
      }
  }
...

👀

Please take a closer look at the pen, and notice how it is all pieced together. This was actually taken straight from the official docs.

See the Pen 06. Events by @ackzell on CodePen.