Итоги

В этом уроке вы узнали, что:

• v-model связывает поле с рефом в обе стороны: введённое попадает в реф, а изменение рефа видно в поле. Он делает то же, что :value и @input вместе, а в шаблоне пишется без .value.
• Он работает с текстовыми полями и с textarea (никогда не пишите {{ }} между её тегами), с select, реф которого получает value выбранного варианта (:value, если варианты берутся из v-for), и с переключателями, реф которых получает value отмеченного.
• Флажок с рефом true или false отвечает «да» или «нет». Несколько флажков с одним массивом заполняют его значениями отмеченных.
• Значение поля — всегда текст. .trim убирает пробелы в начале и в конце, а .number превращает его в число. Поля с type="number" получают .number сами, а переключатели и флажки получают числа через :value.
• @submit.prevent на форме запускает вашу функцию, когда форма отправлена. Без .prevent страница загружается заново, и приложение начинается с нуля.
• Чтобы добавить элемент из формы, поместите в массив объект с собственным id, а потом очистите поля, изменив их рефы.
• Сообщения об ошибках лежат в шаблоне, под v-if, а реф говорит, когда их показывать. :disabled не даёт нажать на кнопку, пока форма не заполнена.

В следующем уроке, «Вычисляемые значения и наблюдатели», вы научитесь один раз записывать значения, составленные из других значений, например итог заказа, и запускать код при каждом изменении значения, например чтобы сохранить заказ.

Но сначала немного практики: кафе «Уголок» принимает бронь столиков. В App.vue только заголовок, а форму вы напишете сами. Совет: храните сообщение о брони в отдельном рефе, чтобы оно не пропадало, когда поле имени очищается. А v-for по числу быстро делает варианты.