Vlastní návyky

Pět návrhů je dobrý začátek, ale aplikace by měla zvládnout i vaše vlastní návyky. Pod seznam přijde formulář s textovým polem a tlačítkem Přidat, postavený jako v lekci Formuláře:

<form @submit.prevent="pridejNavyk">
    <input v-model.trim="novyNazev" placeholder="Nový návyk">
    <button>Přidat</button>
</form>
<p v-if="chybaNazvu" class="chyba">{{ chybaNazvu }}</p>

v-model.trim ukládá, co napíšete, do refu novyNazev, bez mezer na začátku a na konci. Formulář odešle jeho tlačítko nebo Enter v textovém poli a .prevent zařídí, že prohlížeč stránku znovu nenačte a aplikace nezačne od začátku. Práci tak odvede pridejNavyk:

function pridejNavyk() {
    if (novyNazev.value === "") {
        chybaNazvu.value = "Napište název návyku.";
        return;
    }
    navyky.value.push({
        id: Date.now(),
        nazev: novyNazev.value,
        ikona: "⭐",
        hotovo: false,
    });
    novyNazev.value = "";
    chybaNazvu.value = "";
}

Nový návyk potřebuje id, které nemá žádný jiný, kvůli :key i kvůli prepni(). Date.now(), které znáte z miniprojektu Rozpočet, vrátí počet milisekund od začátku roku 1970, třeba 1793980800000. Každou milisekundu je to jiné číslo a dva návyky v jedné milisekundě nikdo nepřidá, takže z něj je dobré id. Nový návyk dostane jako ikonu hvězdičku a zatím není splněný.

Díky .trim se z názvu, který je jen z mezer, stane "", takže funkce místo prázdného návyku ukáže chybu a return ji ukončí. Když je název v pořádku, funkce návyk přidá a smaže chybu i název: novyNazev se změní na "" a v-model podle něj vyprázdní i textové pole.