Vue Js Click Event

Posted on  by admin

Vue's v-on directive is how you handle events in Vue. The v-on:click directive lets you attach a click event handlerto an element. For example, the below Vue app updates every time you clickthe "Add" button.

Below is a live example:. If v-on:click is too verbose for you, Vue also supports @click, which is aconvenient shorthand. Vue executes the expression in v-on:clickwith a couple additional features. First, Vue injects a $event variable that yourv-on:click code can use.

$event is a reference to the vanilla DOM event. Second, if your expression evaluates to a function, Vue will execute that functionand automatically pass $event as the first parameter. For example, the belowcode is equivalent to the above, because, since myMethod is a function, Vuewill call it and pass $event.

# Methods in Inline Handlers