Filtrovaná nabídka

V lekci Podmínky a seznamy jste nabídku filtrovali funkcí, kterou volala šablona. Stejnou práci zvládne i vypočítaná hodnota: může obsahovat celý seznam, vypočítaný z jiných dat. Tady je nabídka, která ukazuje jen to, co nestojí víc, než chce zákazník utratit:

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

const nabidka = [
    { id: 1, nazev: "Espresso", cena: 55 },
    { id: 5, nazev: "Mrkvový dort", cena: 85 },
    { id: 6, nazev: "Cheesecake", cena: 95 },
];
const nejvyssiCena = ref(90);

const dostupne = computed(() => {
    return nabidka.filter((polozka) => polozka.cena <= nejvyssiCena.value);
});
</script>

<template>
    <input v-model.number="nejvyssiCena" type="number">
    <ul>
        <li v-for="polozka in dostupne" :key="polozka.id">{{ polozka.nazev }}</li>
    </ul>
</template>

v-for prochází dostupne jako jakékoli jiné pole. Na začátku seznam ukáže espresso a mrkvový dort. Když zákazník napíše 60, Vue filtruje znovu, protože se změnila hodnota nejvyssiCena, kterou funkce čte, a seznam ukáže už jen espresso. filter() vytvoří nové pole, takže pole nabidka zůstane, jak bylo.

Všimněte si, že nabidka nemá .value. Je to obyčejné pole, ne ref, protože se nikdy nemění. .value mají jen refy a vypočítané hodnoty.

V tomto cvičení si zákazník vybírá kategorii z rozbalovacího seznamu a hledá podle názvu. v-model už ukládá, co vybere a napíše, do kategorie a hledani, ale seznam pořád ukazuje celé pole nabidka. Jedna vypočítaná hodnota může číst oba refy a Vue ji přepočítá, když se změní kterýkoli z nich.

Tip k hledání: includes() zjistí, jestli text obsahuje jiný text, ale "Čaj" a "čaj" jsou pro ni různé texty. Oba texty proto nejdřív převeďte na malá písmena pomocí toLowerCase().