Handling Click Events

Snippet

Handling Click Events

To listen to DOM events, we use the v-on directive, which is commonly shortened to the @ symbol. It calls a function defined in your script when the event occurs.

snippet.js

javascript

<template>
  <button @click="showAlert">Click Me!</button>
</template>
 
<script setup>
const showAlert = () => {
  alert('Button was clicked!');
};
</script>

vue

Breakdown

@click="showAlert"

Listens for the click event and triggers the showAlert function.

const showAlert = () => { ... }

Defines the logic that should run when the button is pressed.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Handling Click Events

Related