Урок 9 · Vue

v-model связывает поле и значение

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

Почему это следующий шаг

Условие уже смотрит на длину имени. Эту длину удобно брать из модели поля.

Как сделать

Поставь input v-model="name". Если name — это ref, в script оно будет name.value, а в шаблоне просто name. Начальное значение задай в ref(""), а не после первого ввода. Очистку сделай присваиванием пустой строки: поле опустеет само.

<input v-model="name">
<button @click="name = ''">Очистить</button>

Что проверить

• Текст в поле и значение в скрипте совпадают.
• Кнопка очищает и поле, и значение.
• Условие длины реагирует на ввод сразу.