Текстовые поля и v-model

Формы — это способ, которым посетители говорят приложению, чего они хотят: вводят имя, выбирают напиток, ставят флажок. В этом уроке вы соберёте форму заказа для кафе «Уголок» — шаг за шагом, поле за полем, — а потом отправите её.

Того, что вы знаете из урока «Состояние и события», уже хватит, чтобы хранить текст поля в рефе: :value кладёт реф в поле, а @input кладёт каждое изменение текста поля обратно в реф:

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

const name = ref("");

function updateName(event) {
    name.value = event.target.value;
}
</script>

<template>
    <input :value="name" @input="updateName">
    <p>Заказ: {{ name }}</p>
</template>

В форме много полей, и писать обе половинки для каждого из них долго. Директива v-model делает обе сразу:

<input v-model="name">
<p>Заказ: {{ name }}</p>

Функция не нужна. Введите Анна — и name станет "Анна", а абзац покажет Заказ: Анна. Работает и в обратную сторону: когда скрипт меняет реф, например name.value = "", поле показывает новое значение, то есть ничего. Поле и реф всегда хранят один и тот же текст, поэтому это называют двусторонней привязкой.

textarea — поле для длинного текста в несколько строк — работает так же: <textarea v-model="note"></textarea>. Не пишите {{ note }} между его тегами: так заметка попадёт в поле только при запуске страницы, а то, что вводит пользователь, в реф не попадёт.

Типичные ошибки:

• v-model на переменной, которая не реф. С const name = ""; страница не запускается, а в красной полосе написано v-model cannot be used on a const binding because it is not writable. С let вводить текст можно, но страница не меняется — как с обычным let в уроке «Состояние и события».
• v-model="name.value". В шаблоне реф пишется без .value, и v-model не исключение. Тогда при вводе в консоли появляется TypeError: Cannot create property 'value' on string ''.