Урок 6 · Vue

Добавляем пункт и не теряем ввод

Форма во Vue — это v-model плюс событие отправки. Отдельный клик по кнопке забывает клавишу Enter.

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

Список уже рисуется. Маршрут Vue заканчивается добавлением в этот список.

Как сделать

Повесь @submit.prevent на форму. Если строка после trim пустая, выйди. Иначе добавь объект и очисти ref пустой строкой. Подпись поля оставь в label. Не меняй props дочернего компонента напрямую, если список живёт у родителя: дочерний может сообщить событием, а родитель добавит.

function add() {
  const value = title.value.trim();
  if (!value) return;
  items.value.push({ id: Date.now(), title: value });
  title.value = "";
}

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

• Enter добавляет задачу.
• Поле очищается.
• Пустая строка не попадает в список.