v-on

up:: Vue Directives Any event you can listen for, you can listen for with v-on

<button v-on:click="counter++">Add</button>

Or, you can call Vue Methods:

<button v-on:click="add">Add</button>

Shorthand:

<button @click="add">Add</button>

From the browser, you always get an event object by default. You can leverage that to get input forms for example:

setName(event) {
	return event.target.value;
}

If you want to pass in another props, you can use the reserved $event variable from Vue:

<input v-on:input="setName($event, 'Heidelberg')"/>

Event modifiers

Sometimes you want to prevent the browser default. For example, on a submit button the page would reload but that is often not what you want.

<form v-on:submit.prevent>
...
</ form>

You could also listen for a specific keyup event. In this instance, whenever enter is pressed, save the input

<input type="text" v-on:keyup.enter="saveInput";

event.target.dataset.sortorder