Сообщения об ошибках

Форма добавляет заказ, даже если имени нет или напиток не выбран: заказ ни для кого. Прежде чем его добавить, проверьте поля, а если чего-то не хватает, скажите, чего именно, прямо у поля.

В курсе JavaScript вы записывали каждое сообщение в его элемент через textContent и очищали его, когда поле было заполнено правильно. В Vue сообщения лежат в шаблоне, а реф говорит, когда их показывать:

<script setup>
// ...
const showErrors = ref(false);

function addOrder() {
    if (name.value === "" || drink.value === "") {
        showErrors.value = true;
        return;
    }
    orders.value.push({ id: nextId, name: name.value, drink: drink.value });
    nextId++;
    name.value = "";
    drink.value = "";
    showErrors.value = false;
}
</script>

<template>
    <form @submit.prevent="addOrder">
        <label for="name">Ваше имя</label>
        <input id="name" v-model.trim="name">
        <p v-if="showErrors && name === ''" class="error">Введите имя.</p>
        <!-- ... -->
    </form>
</template>

Когда поле пустое, addOrder включает сообщения и завершается через return, ничего не добавив. Сообщение об имени показывается, пока showErrors равно true, а имя пустое. Поэтому, как только посетитель вводит имя, сообщение исчезает, без повторной отправки формы: name изменилось, и Vue обновил страницу. Благодаря .trim имя из одних пробелов — тоже "", так что и оно получает сообщение. А когда заказ добавлен, showErrors снова становится false: поля опять пустые, но следующий посетитель пока ничего не сделал неправильно.