Postup

Aplikace by měla na první pohled ukázat, jak vám den jde: Dnes hotovo: 2 / 5, ukazatel průběhu, který se s každým odškrtnutým návykem plní, a pochvalu, když splníte všechno.

To všechno vzniká z navyky, takže je to práce pro vypočítané hodnoty, stejně jako v lekci Vypočítané hodnoty a sledování. Vue je přepočítá, kdykoli se nějaký návyk změní, a stránka se změní s nimi:

const hotovych = computed(() => {
    return navyky.value.filter((navyk) => navyk.hotovo).length;
});

const procenta = computed(() => {
    if (navyky.value.length === 0) {
        return 0;
    }
    return Math.round((hotovych.value / navyky.value.length) * 100);
});

const vseHotovo = computed(() => {
    return navyky.value.length > 0 && hotovych.value === navyky.value.length;
});

hotovych je počet splněných návyků a procenta říká, kolik je to procent ze všech: 2 z 5 je 40. Math.round() číslo zaokrouhlí na celé (1 ze 3 by bylo 33,333…). Bez if by seznam bez návyků dělil nulou a 0 / 0 je v JavaScriptu NaN, „není číslo“ (z anglického not a number). vseHotovo je true, když jsou splněné všechny návyky, ale ne tehdy, když žádné nejsou.

Ukazatel tvoří dva prvky: šedý pruh s třídou ukazatel a v něm zelený s třídou vypln, oba mají styly ve style.css. Zelený pruh je široký tolik procent, kolik je hotovo. Šířka se mění, a proto patří do :style, jako v lekci Šablony, a protože CSS potřebuje jednotku, přidáte k číslu '%':

<div class="postup">
    <p>Dnes hotovo: {{ hotovych }} / {{ navyky.length }}</p>
    <div class="ukazatel">
        <div class="vypln" :style="{ width: procenta + '%' }"></div>
    </div>
    <p v-if="vseHotovo">Dnes je všechno hotovo! 🎉</p>
</div>

Postup patří k načtené stránce, takže se má ukázat jen spolu se seznamem, pod v-else. v-else ale může mít jen jeden prvek, a tak oba obalte do <template v-else>, jako v lekci Podmínky a seznamy: seskupí je, aniž by do stránky přidal další prvek.

Typické chyby:

• hotovych / navyky.value.length, bez .value u hotovych. Ve skriptu je vypočítaná hodnota, stejně jako ref, objekt s číslem v .value. Vydělením samotného objektu vznikne NaN, takže ukazatel zůstane prázdný.
• width: procenta, bez '%'. Šířku bez jednotky prohlížeč nepoužije a ukazatel neporoste.