Pořadí a čísla

v-for vám může dát i druhou hodnotu: pořadí položky v poli, její index. Napište do závorek dva názvy, nejdřív položku a pak index:

<script setup>
const nejprodavanejsi = [
    { id: 2, nazev: "Cappuccino" },
    { id: 1, nazev: "Espresso" },
    { id: 5, nazev: "Mrkvový dort" },
];
</script>

<template>
    <p v-for="(polozka, index) in nejprodavanejsi" :key="polozka.id">
        {{ index + 1 }}. {{ polozka.nazev }}
    </p>
</template>

Stránka ukáže:

1. Cappuccino
2. Espresso
3. Mrkvový dort

Index se počítá od 0, stejně jako indexy v poli, takže pro čísla od 1 ukažte index + 1. Klíč zůstává polozka.id, i když máte index po ruce: jak vysvětlilo minulé cvičení, index položky se změní, když se odebere některá položka před ní.

v-for umí i počítat. S číslem místo pole zopakuje prvek tolikrát, kolik to číslo říká, a proměnná (tady n) postupně dostane čísla od 1 (ne od 0) až po to číslo:

<span v-for="n in 3" :key="n">☕</span>

To jsou tři šálky: ☕☕☕. Čísla se od sebe liší, takže z nich jsou dobré klíče. Číslo může přijít i z vašich dat: v-for="n in polozka.hodnoceni" zopakuje prvek tolikrát, kolik říká hodnocení položky.