Argumenty a objekt události

Jedna funkce může obsluhovat víc tlačítek, když jí každé předá něco jiného. V @click funkci zavolejte s argumentem, stejně jako byste to udělali ve skriptu:

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

const posledni = ref("zatím nic");

function pridejDoObjednavky(nazev) {
    posledni.value = nazev;
}
</script>

<template>
    <p>Naposledy objednáno: {{ posledni }}</p>
    <button @click="pridejDoObjednavky('Espresso')">Espresso</button>
    <button @click="pridejDoObjednavky('Zelený čaj')">Zelený čaj</button>
</template>

Kliknutí na Espresso ukáže Naposledy objednáno: Espresso. Název je v atributu v jednoduchých uvozovkách, protože samotný atribut je ve dvojitých.

V kurzu JavaScriptu by to byla chyba: button.addEventListener("click", pridejDoObjednavky("Espresso")) zavolá funkci hned, už při načítání stránky, a addEventListener dostane to, co funkce vrátí. V šabloně Vue je to správně. Vue při vykreslování nespouští to, co je v @click. Udělá z toho funkci a tu spustí až při kliknutí. Proto taky funguje @click="pridejSalek" i @click="pridejSalek()".

A co objekt události, který obsluhám dává prohlížeč? Obsluha zapsaná jen názvem, bez závorek, jako @click="pridejSalek", ho dostane jako argument, stejně jako u addEventListener:

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

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

Kliknutí vypíše:

click
Espresso

Když funkci voláte s vlastními argumenty, dá vám Vue objekt události jako $event, kdybyste ho potřebovali taky: @click="pridejDoObjednavky('Espresso', $event)". U kliknutí ho budete potřebovat jen zřídka, ale v dalším cvičení vám objekt události řekne, co uživatel napsal do textového pole.