Forms

https://github.com/oanstein/VueJS-Complete-Guide-Code/tree/master/11_forms

• /11_forms/form_assignments
• /11_forms/form_input

Prevent Default

/form_assignments/src/App.vue#L37

<button 
  type="submit" 
  class="btn btn-primary"
  @click.prevent="submitted = true" 
>
  Submit the Form
</button>

Official Documentation: /v2/guide/events.html#Event-Modifiers

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>