Свои привычки

Пяти готовых привычек для начала достаточно, но в трекере должны быть и ваши собственные. Под списком появляется форма с текстовым полем и кнопкой Добавить, устроенная как в уроке «Формы»:

<form @submit.prevent="addHabit">
    <input v-model.trim="newName" placeholder="Новая привычка">
    <button>Добавить</button>
</form>
<p v-if="nameError" class="error">{{ nameError }}</p>

v-model.trim хранит то, что вы вводите, в рефе newName без пробелов в начале и в конце. Форма отправляется кнопкой или нажатием Enter в поле, а .prevent не даёт браузеру загрузить страницу заново, чтобы addHabit мог сделать своё дело:

function addHabit() {
    if (newName.value === "") {
        nameError.value = "Введите название привычки.";
        return;
    }
    habits.value.push({
        id: Date.now(),
        name: newName.value,
        icon: "⭐",
        done: false,
    });
    newName.value = "";
    nameError.value = "";
}

Новой привычке нужен id, которого нет ни у одной другой, — для :key и для toggle(). Как в мини-проекте «Учёт бюджета», его даёт Date.now(): число миллисекунд с начала 1970 года, которое при каждом нажатии «Добавить» разное. Новая привычка получает звёздочку в качестве значка и пока не выполнена.

Благодаря .trim имя из одних пробелов становится "", поэтому функция показывает ошибку, а не добавляет пустую привычку, а return завершает её. Если имя в порядке, функция добавляет привычку, убирает ошибку и очищает поле: newName становится "", и v-model очищает поле вместе с ним.