Eine gefilterte Speisekarte

In Bedingungen und Listen hast du die Speisekarte mit einer Funktion gefiltert, die die Vorlage aufgerufen hat. Ein berechneter Wert kann diese Aufgabe auch übernehmen: Er kann eine ganze Liste enthalten, die aus anderen Daten berechnet wird. Hier ist eine Speisekarte, die nur zeigt, was höchstens so viel kostet, wie der Kunde ausgeben möchte:

<script setup>
import { computed, ref } from "vue";

const menue = [
    { id: 1, name: "Espresso", preis: 2 },
    { id: 5, name: "Karottenkuchen", preis: 4 },
    { id: 6, name: "Käsekuchen", preis: 5 },
];
const hoechstpreis = ref(4);

const erschwinglich = computed(() => {
    return menue.filter((artikel) => artikel.preis <= hoechstpreis.value);
});
</script>

<template>
    <input v-model.number="hoechstpreis" type="number">
    <ul>
        <li v-for="artikel in erschwinglich" :key="artikel.id">{{ artikel.name }}</li>
    </ul>
</template>

v-for geht durch erschwinglich wie durch jedes Array. Am Anfang zeigt die Liste den Espresso und den Karottenkuchen. Wenn der Kunde 2 tippt, filtert Vue erneut, weil sich hoechstpreis, das die Funktion liest, geändert hat, und die Liste zeigt nur den Espresso. filter() macht ein neues Array, also bleibt menue selbst, wie es ist.

Beachte, dass menue kein .value hat. Es ist ein einfaches Array, kein Ref, weil es sich nie ändert. Nur Refs und berechnete Werte haben .value.

In dieser Übung wählt der Kunde mit einem Select eine Kategorie und sucht nach Namen. v-model schreibt schon, was er wählt und tippt, in kategorie und suche, aber die Liste zeigt weiterhin das ganze menue. Ein berechneter Wert kann beide Refs lesen, und Vue berechnet ihn erneut, wenn sich eines von ihnen ändert.

Ein Tipp für die Suche: includes() sagt dir, ob ein Text einen anderen enthält, aber für es sind "Tee" und "tee" verschiedene Texte. Mache zuerst beide mit toLowerCase() zu Kleinbuchstaben.