Vue3 Event Handling

We can use the v-on directive to listen to DOM events and execute JavaScript code accordingly.

The v-on directive can be abbreviated as the @ symbol.

Syntax format:

v-on:click="methodName"
or
@click="methodName"

v-on

<div id="app">
  &lt;button @click="counter += 1">Increase by 1</button>
  <p>This button has been clicked {{ counter }} times.</p>
</div>

<script>
const app = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Typically, we need to use a method to call a JavaScript function.

v-on can receive a defined method to call.

v-on

<div id="app">
  <!-- `greet` is the method name defined below -->
  &lt;button @click="greet">Click Me</button>
</div>

<script>
const app = {
  data() {
    return {
      name: 'tutorialpro'
    }
  },
  methods: {
    greet(event) {
      // `this` inside `methods` points to the current active instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

In addition to binding directly to a method, you can also use inline JavaScript statements:

v-on

<div id="app">
  &lt;button @click="say('hi')">Say hi</button>
  &lt;button @click="say('what')">Say what</button>
</div>

<script>
const app = {
  data() {

  },
  methods: {
    say(message) {
      alert(message)
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Event handlers can contain multiple methods, separated by the comma operator:

v-on

<div id="app">
  <!-- Both one() and two() will execute on button click -->
  &lt;button @click="one($event), two($event)">
  Click Me
  </button>
</div>

<script>
const app = {
  data() {
  },
  methods: {
    one(event) {
      alert("First event handler logic...")
    },
    two(event) {
      alert("Second event handler logic...")
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Event Modifiers

Vue.js provides event modifiers for v-on to handle DOM event details, such as event.preventDefault() or event.stopPropagation().

Vue.js calls modifiers via directive suffixes represented by a dot ..

• .stop - Stop propagation
• .prevent - Prevent default event
• .capture - Capture mode
• .self - Only listen to events triggered on this element
• .once - Trigger only once
• .left - Left mouse button event
• .right - Right mouse button event
• .middle - Middle mouse wheel event

  <!-- Stop click event from propagating -->
  <a v-on:click.stop="doThis"></a>
  <!-- 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 event listeners -->
  &lt;div v-on:click.capture="doThis">...</div>
  <!-- Trigger callback only on events triggered on this element, not on child elements -->
  &lt;div v-on:click.self="doThat">...</div>
  
  <!-- Click event will be triggered only once, added in version 2.1.4 -->
  <a v-on:click.once="doThis"></a>
  

Key Modifiers

Vue allows adding key modifiers for v-on when listening to keyboard events:

<!-- Only call vm.submit() when keyCode is 13 -->
&lt;input v-on:keyup.13="submit">

Remembering all keyCodes is difficult, so Vue provides aliases for the most commonly used keys:

<!-- Same as above -->
&lt;input v-on:keyup.enter="submit">
<!-- Shorthand syntax -->
&lt;input @keyup.enter="submit">

Full list of key aliases:

• .enter
• .tab
• .delete (captures both "Delete" and "Backspace" keys)
• .esc
• .space
• .up
• .down
• .left
• .right

System modifier keys:

• .ctrl
• .alt
• .shift
• .meta

Mouse button modifiers:

• .left
• .right
• .middle

Example

<p><!-- Alt + C -->
&lt;input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
&lt;div @click.ctrl="doSomething">Do something</div>

.exact Modifier

The .exact modifier allows you to control events triggered by precise combinations of system modifiers.

Example

<!-- Will trigger even if Alt or Shift is also pressed -->
&lt;button @click.ctrl="onClick">A</button>

<!-- Will trigger only if Ctrl is pressed alone -->
&lt;button @click.ctrl.exact="onCtrlClick">A</button>

<!-- Will trigger only if no system modifiers are pressed -->
&lt;button @click.exact="onClick">A</button>