Vue.js Event Handling

Event handling in Vue.js lets your application respond to user actions such as clicks, form inputs, or key presses. Vue provides a clean way to bind these events using the v-on directive or its shorthand @. In this tutorial, you'll learn how to listen to events, trigger methods, pass arguments, and control behavior—all within your Vue instance.

Listening to Events with v-on

The v-on directive attaches event listeners to elements. It supports native browser events like click, input, submit, and more.

Handling a Click

Use v-on:click to trigger a method when a button is clicked.

Example:

<div id="app">
  <button v-on:click="showMessage">Click Me</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script>
  const { createApp } = Vue;

  createApp({
    methods: {
      showMessage() {
        alert('Button clicked!');
      }
    }
  }).mount('#app');
</script>

Clicking the button runs the showMessage method.

Shorthand for v-on

Vue supports a shorthand @ for v-on. It makes the syntax cleaner.

<button @click="showMessage">Click Me</button>

This works exactly the same as v-on:click.

Event Handling with Data

You can update data properties in response to events.

Increment a Counter

Bind a click event to update a data property directly.

Example:

<div id="app">
  <h2>{{ count }}</h2>
  <button @click="count++">Add</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        count: 0
      };
    }
  }).mount('#app');
</script>

Here, each click increases the value of count. Vue automatically rerenders the DOM.

Passing Arguments to Methods

You can pass arguments directly to a method from an event handler.

Example:

<div id="app">
  <button @click="greet('Amit')">Greet Amit</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script>
  const { createApp } = Vue;

  createApp({
    methods: {
      greet(name) {
        alert('Hello, ' + name);
      }
    }
  }).mount('#app');
</script>

Clicking the button calls the greet method with 'Amit' as the argument.

Accessing the Event Object

To use the native event object, pass $event as an argument.

Example:

<div id="app">
  <input @keyup.enter="logEvent($event)" placeholder="Press Enter">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script>
  const { createApp } = Vue;

  createApp({
    methods: {
      logEvent(event) {
        console.log('Key pressed:', event.key);
      }
    }
  }).mount('#app');
</script>

This logs the key when the user presses Enter in the input field.

Using Event Modifiers

Vue offers event modifiers to simplify common tasks. These modifiers are appended directly to the event directive.

Example with Modifiers

Use event modifiers like .prevent to control default browser behavior.

<div id="app">
  <form @submit.prevent="submitForm">
    <input type="text" v-model="name">
    <button type="submit">Submit</button>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        name: ''
      };
    },
    methods: {
      submitForm() {
        alert('Form submitted with name: ' + this.name);
      }
    }
  }).mount('#app');
</script>

In this example, .prevent stops the page from refreshing when the form is submitted.

Conclusion

Vue.js makes event handling simple and efficient. You can use v-on or @ to respond to user actions, trigger methods, pass values, and access event details. Modifiers add even more control over how events behave. With this knowledge, your Vue applications can react intelligently to user input. In the next tutorial, you'll learn how to track data changes using the watch property.