Entfernen und Filtern

Gewohnheiten ändern sich: Eine, die du nicht mehr machst, sollte verschwinden, und an einem vollen Tag willst du nur sehen, was noch zu tun ist. In dieser Übung bekommt jede Gewohnheit einen Button Entfernen, und die Liste bekommt einen Filter.

Entfernen. Der Button ist in Gewohnheit, die Gewohnheiten aber sind in App.vue, also ist es genau wie bei der Checkbox: Die Komponente sendet ein Ereignis, diesmal entfernen, und die Eltern-Komponente erledigt die Arbeit. Eine Komponente kann mehrere Ereignisse senden, und defineEmits listet sie alle auf:

const emit = defineEmits(["umschalten", "entfernen"]);

<button @click="emit('entfernen', gewohnheit.id)">Entfernen</button>

Der Button steht nach dem label, nicht darin, weil das Label zur Checkbox gehört. In App.vue behält entfernen(id) mit filter() alle Gewohnheiten außer dieser einen. Das erzeugt ein neues Array, das in gewohnheiten.value landet, wie in der Lektion State und Ereignisse:

function entfernen(id) {
    gewohnheiten.value = gewohnheiten.value.filter((gewohnheit) => gewohnheit.id !== id);
}

Filtern. Über der Liste wählt eine Auswahlliste (ein select), was die Liste zeigt: alle Gewohnheiten, nur die noch offenen oder nur die erledigten. v-model schreibt ihren Wert in das Ref filter, und die Liste zeigt einen berechneten Wert, der aus gewohnheiten und filter entsteht. (Das Ref filter und die Array-Methode filter() haben nur den Namen gemeinsam.)

<label class="filter">
    Anzeigen
    <select v-model="filter">
        <option value="alle">Alle</option>
        <option value="offen">Offen</option>
        <option value="erledigt">Erledigt</option>
    </select>
</label>

const filter = ref("alle");

const angezeigteGewohnheiten = computed(() => {
    if (filter.value === "offen") {
        return gewohnheiten.value.filter((gewohnheit) => !gewohnheit.erledigt);
    }
    if (filter.value === "erledigt") {
        return gewohnheiten.value.filter((gewohnheit) => gewohnheit.erledigt);
    }
    return gewohnheiten.value;
});

Der Fortschritt zählt weiterhin alle Gewohnheiten, aus gewohnheiten. Nur v-for geht durch angezeigteGewohnheiten. Ist der Filter auf Offen gestellt, verlässt eine Gewohnheit, die du abhakst, sofort die Liste, weil sie nicht mehr in angezeigteGewohnheiten steht.