Seznamy s v-for

V kurzu JavaScriptu jste seznam z pole vykreslovali cyklem: pro každou položku createElement(), textContent a append(), a předtím jste seznam vyprázdnili. Ve Vue napíšete prvek jen jednou, s direktivou v-for, a Vue jich udělá tolik, kolik je položek v poli:

<script setup>
const nabidka = [
    { id: 1, nazev: "Espresso", cena: 55 },
    { id: 2, nazev: "Cappuccino", cena: 75 },
    { id: 3, nazev: "Zelený čaj", cena: 60 },
];
</script>

<template>
    <ul>
        <li v-for="polozka in nabidka" :key="polozka.id">
            {{ polozka.nazev }}: {{ polozka.cena }} Kč
        </li>
    </ul>
</template>

Na stránce pak bude:

<ul>
    <li>Espresso: 55 Kč</li>
    <li>Cappuccino: 75 Kč</li>
    <li>Zelený čaj: 60 Kč</li>
</ul>

polozka in nabidka funguje jako for (const polozka of nabidka): polozka je postupně každá položka pole a název proměnné si vyberete sami. Uvnitř prvku s v-for, v jeho textu i v jeho atributech, je polozka ta položka, pro kterou je tenhle prvek.

:key dá každému prvku klíč, hodnotu, která je pro každou položku jiná. Když se pole změní, Vue podle klíčů pozná, který prvek patří ke které položce, a přidá, přesune nebo odstraní jen prvky položek, které se změnily. Klíč proto musí zůstat u své položky: použijte její id, ne její pořadí v poli. Když se nějaká položka odebere, položky za ní se posunou o místo dopředu. S pořadím jako klíčem by si Vue myslelo, že zmizela ta poslední, a to, co je v samotných prvcích, třeba text napsaný do textového pole v jednom z nich, by zůstalo na místě a ocitlo se u jiné položky. v-for proto vždycky dávejte :key.

Když je pole v refu, seznam ho sleduje: přidejte položku pomocí push() a Vue pro ni přidá prvek. Nic nevyprazdňujete ani znovu nevykreslujete.