Vue Directive & Event Modifiers

Directive modifiers are special postfixes that are denoted by a dot, indicating that a directive should be bound in some special way. The modifiers that are related to events are referred to as event modifiers.

Yeah, I know what you are probably thinking. That sounds fancy and all, but what does it actually mean?

While modifiers are not limited to events, let’s take a look at event modifiers, as these are easy to grasp.

So right now I have a div element with a nested button (see JSFiddle at the bottom), both having a click event handler which simply invokes a method that shows an alert.

If I click the button and close the first alert, notice that a second alert is shown. This is because the click event for the button element propagates up the DOM and thereby triggers the click event on the div element as well. This wouldn’t matter if we didn’t have an event handler on the div element, but in this case we do. We can disable this default behavior by using an event modifier that corresponds to calling event.stopPropagation() in JavaScript. We could actually do this too, but embedding that kind of DOM logic into our methods is probably not the best way to go. Instead, we can use the stop event modifier, which does exactly that, so let’s see it in action.

<button v-on:click.stop="showDialog">Click Here!</button>

Notice the syntax; I simply added a dot followed by the name of the modifier, after the name of the event.

If we try again, we’ll see that only one alert is shown this time, which is the one triggered by the click event on the button. Because of our modifier, event propagation is stopped from here, and thus the click event on the div element is ignored.

I will just remove the div element before moving onto the next example.

For whatever reason, we might want to trigger an event only once. This can be accomplished with the once modifier. If I replace the stop modifier with the once modifier, we should see that the alert is only displayed once.

What if we add an event listener to an event, but we don’t want the browser to perform the default action? Perhaps we don’t want to submit a form when clicking a submit button, or maybe we don’t want the browser to navigate to a URL within the href property of a link. Let’s take the latter example and see how we can accomplish that. So if I add a link that points to Google.com and add the same click event handler as before, we will see that the browser first shows the alert, and then navigates to the link’s URL.

<a href="http://google.com" v-on:click="showDialog" target="_blank">Or here!</a>

Let’s check and verify that what I just said is true… And indeed it is. Note that the reason I added a target of _blank to the link, is for the link to work with JSFiddle, so it has nothing to do with Vue.js.

If I want to prevent the browser from opening the URL, I can use the prevent modifier. This is the same as calling event.preventDefault() in JavaScript.

<a href="http://google.com" v-on:click.prevent="showDialog" target="_blank">Or here!</a>

Now we will still see the alert, but the browser will no longer send us off to Google. If we just wanted to prevent the default browser action from occurring, when clicking the button, we could actually completely leave out the v-on directive’s expression.

<a href="http://google.com" v-on:click.prevent target="_blank">Or here!</a>

The only thing this does, is the equivalent of calling event.preventDefault(). So if you use some event modifier meaning that you don’t need the expression, then you can simply leave it out.

Before ending this post, I just want to mention that modifiers can be chained, by simply separating the modifiers with dots. I will get back to that in the next post, though.

There are other modifiers too, but these are the ones we need for now. I will include a link to an overview of event modifiers in a few posts, but for now, let’s move onto talking about something called key modifiers.