Seznam komponent

Skutečná nabídka se nepíše ručně, jedna <PolozkaMenu> za druhou. Pochází z dat a data ukazujete pomocí v-for, které funguje na komponentách stejně jako na prvcích:

<PolozkaMenu v-for="polozka in nabidka" :key="polozka.id" :nazev="polozka.nazev" :cena="polozka.cena" />

Každá položka pole nabidka dostane vlastní PolozkaMenu s vlastními props. :key patří na komponentu, stejně jako na <li>: Vue podle něj položky rozlišuje. Není to props, takže ho komponenta nedeklaruje.

Když komponenta potřebuje většinu objektu, je jednodušší jí předat celý objekt jako jednu props:

<PolozkaMenu v-for="polozka in nabidka" :key="polozka.id" :polozka="polozka" />

<script setup>
defineProps({
    polozka: { type: Object, required: true },
});
</script>

<template>
    <li class="polozka">
        <span>{{ polozka.nazev }}</span>
        <span class="cena">{{ polozka.cena }} Kč</span>
    </li>
</template>

Typ této props je Object a šablona čte jeho vlastnosti jako u každého objektu: polozka.nazev. Když položky nabídky dostanou novou vlastnost, třeba veganske, komponenta ji může ukázat a App.vue se vůbec nezmění.

A všimněte si dvojtečky v :polozka="polozka". polozka vlevo je jméno props a ta vpravo je JavaScript: proměnná polozka z v-for, aktuální položka nabídky.