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.
<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.
<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.