Отправка формы

Пока поля только показывали то, что введено. Теперь посетитель отправляет заказ. Как и в курсе JavaScript, поля, которые относятся друг к другу, собирают в form, и форма получает событие submit, когда нажимают её кнопку или когда в одном из её текстовых полей нажимают Enter. В Vue его обрабатывают через @submit на форме:

<form @submit.prevent="addOrder">
    <label for="name">Ваше имя</label>
    <input id="name" v-model.trim="name">
    <button>Заказать</button>
</form>

Кнопка button в форме отправляет её, даже без type="submit". И помните о действии браузера по умолчанию: когда форма отправляется, браузер загружает страницу заново. Приложение Vue тогда начинает с нуля: каждый реф возвращается к начальному значению, а список заказов пуст. Модификатор .prevent вызывает за вас event.preventDefault() — до того, как сработает ваша функция. Посмотрите, что будет без него: у формы в этом упражнении ещё нет @submit, так что введите имя, нажмите «Заказать» и посмотрите, как страница начнёт всё с начала.

Добавляем заказ. Функция собирает объект из рефов и добавляет его в массив, который показывает v-for:

const orders = ref([]);
let nextId = 1;

function addOrder() {
    orders.value.push({ id: nextId, name: name.value, drink: drink.value });
    nextId++;
    name.value = "";
    drink.value = "";
}

Каждый заказ получает свой id для :key из nextId, который увеличивается на единицу после каждого заказа. nextId — обычный let, а не реф: страница его не показывает, поэтому Vue не нужно знать, когда он меняется. Две последние строки готовят форму к следующему посетителю: благодаря двусторонней привязке пустые рефы очищают поля.