Кнопка, которая ждёт

Сообщения об ошибках говорят, что не так, когда посетитель уже отправил форму. Другой способ — не давать отправить её, пока она не заполнена: кнопка «Заказать» остаётся отключённой, пока нет имени и напитка. Отключённую кнопку нельзя нажать, и в форме Enter тоже не отправляет форму. Вы знаете :disabled из урока «Синтаксис шаблонов»:

<button :disabled="name === '' || drink === ''">Заказать</button>

Vue следит за атрибутом: как только посетитель вводит имя и выбирает напиток, условие становится false, и кнопка начинает работать. В style.css этого упражнения отключённая кнопка серая.

Условие, которое нужно больше чем в одном месте, легче читать, если вынести его в функцию с хорошим названием:

function isFilled() {
    return name.value !== "" && drink.value !== "";
}

Тогда у кнопки будет :disabled="!isFilled()", а у подсказки, которая видна, только пока кнопка отключена, — v-if="!isFilled()". Кнопка, которая просто серая, без единого слова о причине, заставляет посетителя гадать.