@click basics

In Vue luister je naar events met @event (afkorting voor v-on:event). De bekendste is @click.

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

const count = ref(0)
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

Maar er zijn veel meer events: @input, @submit, @mouseover, @keyup, etc.

<input @input="handleInput" />
<form @submit="handleSubmit">...</form>
<div @mouseover="handleHover">Hover me</div>

Inline of functie?

Je kunt op twee manieren reageren op een event:

1. Inline expressie — voor simpele acties

<button @click="count++">+1</button>
<button @click="isOpen = true">Open</button>
<button @click="items = []">Reset</button>

2. Functie aanroepen — voor meer logica

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

const items = ref([])

const addItem = () => {
  items.value.push('Nieuw item')
  console.log('Item toegevoegd')
}
</script>

<template>
  <button @click="addItem">Add</button>
</template>

Belangrijk:

@click="addItem"      <!-- ✅ verwijst naar de functie -->
@click="addItem()"    <!-- ✅ roept de functie aan (zelfde resultaat) -->

Beide werken voor functies zonder argumenten. Met argumenten moet je () gebruiken:

@click="addItem('hello')"    <!-- ✅ -->

Het event object

Soms heb je informatie over het event nodig — bijvoorbeeld de waarde van een input. Vue geeft je het event object op twee manieren:

Manier 1: functie zonder argumenten

<script setup>
const handleInput = (event) => {
  console.log(event.target.value)
}
</script>

<template>
  <input @input="handleInput" />
</template>

Manier 2: $event bij inline of met argumenten

<script setup>
const log = (msg, event) => {
  console.log(msg, event.target)
}
</script>

<template>
  <input @input="log('getypt:', $event)" />
</template>

Vuistregel: Roep je een functie aan zonder ()? Dan krijg je het event automatisch als eerste argument. Roep je hem met argumenten aan? Gebruik $event om het event ook mee te geven.

In de praktijk: bij inputs gebruik je meestal v-model — dan hoef je het event helemaal niet aan te raken.

Event modifiers — .prevent en .stop

Vue heeft handige korte schrijfwijzen voor veelgebruikte event-acties. Je voegt ze toe met een punt achter het event-name.

.prevent — voorkom default gedrag

Vooral handig bij formulieren: voorkomt dat de pagina ververst bij submit.

<!-- Zonder modifier -->
<form @submit="handleSubmit">
  ...
</form>

<script setup>
const handleSubmit = (event) => {
  event.preventDefault()        // 😩 elke keer typen
  // ...
}
</script>
<!-- Met .prevent — veel korter -->
<form @submit.prevent="handleSubmit">
  ...
</form>

<script setup>
const handleSubmit = () => {
  // pagina ververst niet meer ✅
}
</script>

.stop — stop event propagatie

Soms wil je dat een click niet "doorbubbelt" naar parent elementen.

<div @click="openDetail">
  <p>Klik om detail te zien</p>

  <!-- Deze knop opent NIET de detail, alleen verwijderen -->
  <button @click.stop="deleteItem">Verwijder</button>
</div>

Deze twee dek je 95% van de gevallen mee:

  • .prevent → bij @submit op forms, bij @click op een <a>
  • .stop → bij geneste click-handlers

Toets-events — .enter en .escape

Wil je alleen reageren als de gebruiker een specifieke toets indrukt? Gebruik een key modifier.

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

const search = ref('')

const doSearch = () => {
  console.log('Zoeken naar:', search.value)
}
</script>

<template>
  <input
    v-model="search"
    @keyup.enter="doSearch"
    placeholder="Typ en druk op Enter..."
  />
</template>

Meest gebruikte key modifiers

  • @keyup.enter — Enter ingedrukt (zoeken, opslaan)
  • @keyup.escape — Escape (modal sluiten)
  • @keyup.tab — Tab
  • @keyup.delete — Delete of Backspace

Praktisch voorbeeld: een modal die sluit met Escape:

<div @keyup.escape="closeModal">
  <!-- modal content -->
</div>

Belangrijke Regels

  • @event = afkorting voor v-on:event — altijd @ gebruiken
  • Functie aanroepen? @click="fn" of @click="fn()" — beide werken
  • Met argumenten → @click="fn(arg)" (haakjes verplicht)
  • Event object nodig? → functie krijgt het automatisch, of gebruik $event inline
  • Form submit → altijd @submit.prevent

Veelgemaakte Fouten

Fout — page refresht bij submit:

<form @submit="handleSubmit">     <!-- ❌ pagina ververst -->
  <button type="submit">Send</button>
</form>

Goed:

<form @submit.prevent="handleSubmit">   <!-- ✅ blijft staan -->
  <button type="submit">Send</button>
</form>

Fout — functie direct aanroepen i.p.v. doorgeven:

<button @click="addItem('hello')()" >Add</button>
<!-- ❌ je roept het resultaat aan, niet de functie -->

Goed:

<button @click="addItem('hello')">Add</button>
<!-- ✅ -->

Fout — $event vergeten bij argumenten + event:

<input @input="log('typed:')" />
<!-- ❌ log krijgt geen event mee -->

Goed:

<input @input="log('typed:', $event)" />
<!-- ✅ -->