Handling User Events

Welcome back! In the last lesson, you learned how to use the Composition API to create reactive variables and bind them to your template. You also saw how Vue’s v-model directive keeps your data and UI in sync, making it easy to build interactive components. Now, let’s take the next step: making your app respond to user actions, such as button clicks.

Handling user events is a key part of building any interactive web application. Whether you want to update a message, submit a form, or trigger an animation, you need a way to listen for and respond to what the user does. In Vue, this is simple and powerful. By the end of this lesson, you will know how to listen for events, write handler functions, and connect everything together in your components. You will see these ideas in action using the greeting card example you have already started to build.

In Vue, you listen for user events using event directives. The most common way to do this is with the @ symbol, which is a shortcut for the v-on directive. For example, if you want to listen for a click event on a button, you write @click="handlerFunction". This tells Vue to call your function whenever the button is clicked.

This approach is very similar to how you might use addEventListener in plain JavaScript, but Vue’s syntax is much cleaner and easier to read. You can use the @ syntax for many different events, such as @input, @change, @mouseover, and more. In this lesson, we will focus on @click since it is the most common event for buttons.

To respond to an event, you need a function that will run when the event happens. In the Composition API, you define these functions inside the <script setup> block of your component. This is the same place where you create your reactive variables with ref.

For example, in the greeting card component, you might want to change the greeting message when a button is clicked. You can write a function like this:

<script setup>
import { ref } from 'vue'

const greeting = ref('Hello Vue Learner!')
const recipient = ref('Your Name')

// Event handler function to change the greeting message
function changeGreeting(newMessage) {
  greeting.value = newMessage
}
</script>

Here, changeGreeting is a function that takes a new message as a parameter and updates the greeting variable. By placing this function inside the <script setup> block, it is available to use in your template.

Once you have your event handler function, you need to connect it to an element in your template. This is where the @ syntax comes in. For example, to call changeGreeting when a button is clicked, you write:

<button @click="changeGreeting('Happy Birthday')">Birthday</button>

This line creates a button labeled "Birthday." When the user clicks the button, Vue calls the changeGreeting function and passes in the string 'Happy Birthday'. The greeting message on the page will update right away, thanks to Vue’s reactivity system.

You can add as many buttons as you like, each with its own message:

<div class="button-group">
  <button @click="changeGreeting('Happy Birthday')">Birthday</button>
  <button @click="changeGreeting('Congratulations')">Congrats</button>
  <button @click="changeGreeting('Good Luck')">Good Luck</button>
</div>

Each button is connected to the same function but with a different message. This makes your code simple and easy to maintain.

Sometimes, you want to pass extra information to your event handler function. In the example above, you saw how to pass a custom message to changeGreeting by including it in the parentheses: @click="changeGreeting('Happy Birthday')".

Vue makes this very easy. When you use the @click directive with a function call, you can pass any value you want — such as a string, a number, or even an object. The function will receive this value as its parameter.

For example, if you want to log which button was clicked, you could update your function like this:

function changeGreeting(newMessage) {
  console.log('Button clicked:', newMessage)
  greeting.value = newMessage
}

Now, whenever a button is clicked, the message will be printed to the console, and the greeting will update on the page.

Let’s look at the full greeting card example to see how all these pieces fit together. Here is the relevant code from App.vue:

<script setup>
import { ref } from 'vue'

const greeting = ref('Hello Vue Learner!')
const recipient = ref('Your Name')

// Event handler function to change the greeting message
function changeGreeting(newMessage) {
  greeting.value = newMessage
}
</script>

<template>
  <div class="greeting-card">
    <h1>{{ greeting }}</h1>
    <p>To: {{ recipient }}</p>

    <div class="input-group">
      <label for="recipient-input">Change Recipient:</label>
      <input id="recipient-input" v-model="recipient" />
    </div>

    <div class="button-group">
      <button @click="changeGreeting('Happy Birthday')">Birthday</button>
      <button @click="changeGreeting('Congratulations')">Congrats</button>
      <button @click="changeGreeting('Good Luck')">Good Luck</button>
    </div>
  </div>
</template>

When you run this component, you will see a greeting message and a recipient’s name. You can change the recipient by typing in the input field. Below the input, there are three buttons. When you click any of these buttons, the greeting message at the top will change to match the button you clicked.

For example, if you click the "Congrats" button, the output will look like this:

Congratulations
To: Your Name

If you then type "Alex" in the input field, the output updates instantly:

Congratulations
To: Alex

This example shows how event handling, reactive variables, and data binding all work together in Vue to create a smooth and interactive user experience.

In this lesson, you learned how to handle user events in Vue using the @ event directive. You saw how to write event handler functions in the Composition API, how to bind them to elements in your template, and how to pass parameters to your functions. The greeting card example demonstrated how these features work together to make your app interactive and responsive to user actions.

You are now ready to practice these skills yourself. In the next exercises, you will write your own event handlers, connect them to buttons, and update your app’s state based on user input. This hands-on practice will help you become confident in handling events in Vue, preparing you for even more advanced features in the future. Keep up the great work!