Odebrání a filtr

Návyky se mění: ten, se kterým jste přestali, by měl zmizet, a v rušném dni se hodí vidět jen to, co ještě zbývá. V tomto cvičení dostane každý návyk tlačítko Odebrat a seznam filtr.

Odebrání. Tlačítko je v komponentě Navyk, ale návyky jsou v App.vue, takže je to stejné jako u zaškrtávacího políčka: komponenta vyšle událost, tentokrát odebrat, a práci udělá rodič. Komponenta může vysílat víc událostí a defineEmits je vyjmenuje všechny:

const emit = defineEmits(["prepnout", "odebrat"]);

<button @click="emit('odebrat', navyk.id)">Odebrat</button>

Tlačítko patří za label, ne dovnitř, protože label patří k zaškrtávacímu políčku. V App.vue nechá funkce odeber(id) metodou filter() všechny návyky kromě toho jednoho. Vznikne nové pole a to se uloží do navyky.value, jako v lekci Stav a události:

function odeber(id) {
    navyky.value = navyky.value.filter((navyk) => navyk.id !== id);
}

Filtr. Nad návyky bude rozbalovací seznam (select), ve kterém si vyberete, co se zobrazí: všechny návyky, jen ty, které ještě zbývají, nebo jen hotové. v-model uloží jeho hodnotu do refu filtr a seznam zobrazí vypočítanou hodnotu, která vznikne z navyky a filtr:

<label class="filtr">
    Zobrazit
    <select v-model="filtr">
        <option value="vse">Všechny</option>
        <option value="zbyvajici">Zbývající</option>
        <option value="hotove">Hotové</option>
    </select>
</label>

const filtr = ref("vse");

const zobrazeneNavyky = computed(() => {
    if (filtr.value === "zbyvajici") {
        return navyky.value.filter((navyk) => !navyk.hotovo);
    }
    if (filtr.value === "hotove") {
        return navyky.value.filter((navyk) => navyk.hotovo);
    }
    return navyky.value;
});

Postup dál počítá všechny návyky, z navyky. Jen v-for prochází zobrazeneNavyky. Když je filtr nastavený na Zbývající, odškrtnutý návyk ze seznamu hned zmizí, protože v zobrazeneNavyky už není.