Vue.js 2 Design Patterns and Best Practices

Event modifiers

Often when we're working with events inside of JavaScript, we'll modify the functionality of the event itself. This means that we need to add event.preventDefault() or event.stopPropagation() within our handler. Vue helps us abstract these calls by handling this inside of the template using event modifiers.

This is best shown with a form example. Let's take our previous people example and modify this to contain a form element:

<template>  <div id="app">    <ul>      <li v-for="p in people" v-bind:key="p.id" >        {{p}}      </li>    </ul>    <form v-on:submit="addPerson">      <input type="text" v-model="person" />      <button>Add {{ person}} </button>    </form>  </div></template>

If you try and run this example, you'll notice that when we click the Add button, ...