Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue.js Events

Related course:
Fullstack Vue: The Complete Guide to Vue.js

Vue can capture events like click events and key press events. An event occurs whenever the user does something with the app: mouse clicks, key presses etc.

Vue events

To connect an event to a HTML element, add v-on in the HTML tag.

Vue supports these events:

  • v-on:click
  • v-on:keydown
  • v-on:submit

click event

To capture a click event, add v-on:click to an HTML element. Between the quotes, write the name of your method.

<button v-on:click="hello">click</button>

In your app.js define the method:

methods: {
hello() {
this.message = 'method called';

keydown event

Vue can get keypress events with v-on:keydown.

If you press a key in an input field, you can call a method using the event parameter:

<div id="app">
{{ message }}
<input v-on:keydown="key"></input>

You can get the key code and key value with:

new Vue({
el: '#app',
data: {
message: 'vuejs model'
methods: {
key: function(event) {
this.message = 'key ' + event.key + ' (' + event.keyCode + ')';

This works for all HTML elements, you could have a span if you want to catch key presses for the whole page:

<span v-on:keydown="key"></span>

← vuejs methods vuejs click →


© vuejsexamples.net - Privacy Policy - Cookie Policy