Event Modifiers

Event modifiers are pre-set modifications that you can chain to your event listener via dot notation. There will be times (especially with single page applications) where you need to use stopPropogation(). You can do this very easily with Vanilla JavaScript, but Vue.js makes event modifiers very easy. The stopPropogation() method can be recreated with @click.stop="functionName".

Other modifiers include:

• .prevent
• .capture
• .self
• .once
• .passive

You can also chain multiple modifiers to a single event.

<button @click.stop.prevent="functionName">Some Button Text</button>