Argumente und das Ereignisobjekt

Eine Funktion kann mehrere Buttons bedienen, wenn jeder ihr etwas anderes übergibt. Rufe die Funktion in @click mit einem Argument auf, genau wie im Skript:

<script setup>
import { ref } from "vue";

const letzteBestellung = ref("noch nichts");

function zurBestellungHinzufuegen(name) {
    letzteBestellung.value = name;
}
</script>

<template>
    <p>Letzte Bestellung: {{ letzteBestellung }}</p>
    <button @click="zurBestellungHinzufuegen('Espresso')">Espresso</button>
    <button @click="zurBestellungHinzufuegen('Grüner Tee')">Grüner Tee</button>
</template>

Ein Klick auf Espresso zeigt Letzte Bestellung: Espresso. Der Name im Attribut steht in einfachen Anführungszeichen, weil das Attribut selbst in doppelten steht.

Im JavaScript-Kurs wäre das ein Fehler gewesen: button.addEventListener("click", zurBestellungHinzufuegen("Espresso")) ruft die Funktion sofort auf, während die Seite lädt, und übergibt addEventListener das, was die Funktion zurückgibt. In einer Vue-Vorlage ist es richtig. Vue führt nicht aus, was in @click steht, während es rendert; es macht daraus eine Funktion und führt diese bei jedem Klick aus. Deshalb funktionieren auch @click="tasseHinzufuegen" und @click="tasseHinzufuegen()" beide.

Und das Ereignisobjekt, das der Browser Handlern übergibt? Ein Handler, der ohne Klammern angegeben ist, wie @click="tasseHinzufuegen", bekommt es als Argument, wie bei addEventListener:

<script setup>
function zeigeEreignis(event) {
    console.log(event.type);
    console.log(event.target.textContent);
}
</script>

<template>
    <button @click="zeigeEreignis">Espresso</button>
</template>

Ein Klick gibt aus:

click
Espresso

Wenn du eine Funktion mit eigenen Argumenten aufrufst, gibt Vue dir das Ereignisobjekt als $event, falls du es auch brauchst: @click="zurBestellungHinzufuegen('Espresso', $event)". Bei Klicks brauchst du es selten, aber in der nächsten Übung sagt dir das Ereignisobjekt, was in ein Feld getippt wurde.