Аргументы и объект события

Одна функция может обрабатывать несколько кнопок, если каждая передаёт ей своё. В @click вызовите функцию с аргументом, как в скрипте:

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

const lastOrder = ref("пока ничего");

function addToOrder(name) {
    lastOrder.value = name;
}
</script>

<template>
    <p>Последний заказ: {{ lastOrder }}</p>
    <button @click="addToOrder('Эспрессо')">Эспрессо</button>
    <button @click="addToOrder('Зелёный чай')">Зелёный чай</button>
</template>

Клик по кнопке «Эспрессо» показывает «Последний заказ: Эспрессо». Название в атрибуте стоит в одинарных кавычках, потому что сам атрибут — в двойных.

В курсе JavaScript это было бы ошибкой: button.addEventListener("click", addToOrder("Эспрессо")) вызывает функцию сразу, при загрузке страницы, и передаёт в addEventListener то, что функция вернула. В шаблоне Vue это правильно. Vue не выполняет то, что записано в @click, пока отрисовывает страницу: он делает из этого функцию и запускает её при каждом клике. Поэтому работают и @click="addCup", и @click="addCup()".

А объект события, который браузер передаёт обработчикам? Обработчик, названный без скобок, например @click="addCup", получает его в качестве аргумента, как и в addEventListener:

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

<template>
    <button @click="showEvent">Эспрессо</button>
</template>

Клик выведет:

click
Эспрессо

Когда вы вызываете функцию со своими аргументами, объект события доступен как $event — на случай, если он тоже понадобится: @click="addToOrder('Эспрессо', $event)". Для кликов он нужен редко, а вот в следующем упражнении объект события подскажет, что напечатали в поле.