Sledování návyků

Vítejte v poslední lekci kurzu Vue! V ní krok za krokem postavíte celou aplikaci: sledování návyků. Návyky jsou drobnosti, které chcete dělat každý den, třeba pít dost vody nebo chodit na procházky. Aplikace je vypíše a vy odškrtáte, co jste dnes splnili. Ukazatel průběhu vám ukáže, jak jste daleko, vlastní návyky můžete přidávat a ty, které nechcete, odebírat. A aplikace si všechno pamatuje, dokonce i to, kolik dní v řadě jste splnili všechno.

Využijete to, co jste se naučili v celém kurzu: komponenty s props a událostmi, data ze souboru, vypočítané hodnoty, formulář a composable. Každé cvičení navazuje tam, kde to předchozí skončilo (v editoru je kód, kterým předchozí cvičení skončilo), a přidává jeden kousek.

Plán. Návyky bydlí v App.vue, v refu s polem objektů. Každý návyk má vlastnosti id, nazev, ikona (emoji) a hotovo, která říká, jestli jste ho dnes splnili. Zobrazit jeden návyk má na starosti komponenta na druhé záložce, Navyk.vue. Návyk dostane v props a splněný návyk už umí přeškrtnout: k tomu slouží <li :class="{ hotovo: navyk.hotovo }"> a její <style scoped>.

Když návyk odškrtnete, komponenta Navyk ho sama nezmění. Návyky patří App.vue, a tak komponenta požádá rodiče událostí, stejně jako v lekci Události komponent. Zaškrtávací políčko ukazuje hodnotu pomocí :checked, a když na něj kliknete, obsluha jeho události change vyšle událost prepnout s id návyku:

<input type="checkbox" :checked="navyk.hotovo" @change="emit('prepnout', navyk.id)">

App.vue ji poslouchá pomocí @prepnout="prepni". Funkce prepni(id) najde návyk s tímto id a změní mu hotovo:

function prepni(id) {
    const navyk = navyky.value.find((polozka) => polozka.id === id);
    navyk.hotovo = !navyk.hotovo;
}

Metoda find() vrátí přímo objekt návyku, ne jeho kopii, takže změna jeho hotovo změní návyk v navyky. Vue pak upraví stránku a Navyk návyk přeškrtne. Data tak bydlí na jednom místě a mění se na jednom místě a komponenty je jen zobrazují.

Proč ne v-model="navyk.hotovo" jako v lekci Formuláře? Měnil by data rodiče zevnitř komponenty Navyk a ve větší aplikaci byste brzy nevěděli, kde všude se vaše data mění. Držte se toho, co ukázala lekce Události komponent: data žijí v App.vue a ke komponentě putují v props, a když je potřeba je změnit, komponenta o to požádá událostí.