Listen mit v-for

Im JavaScript-Kurs hast du eine Liste mit einer Schleife aus einem Array erzeugt: für jeden Eintrag createElement(), textContent und append(), und davor hast du die Liste geleert. In Vue schreibst du das Element einmal, mit der Direktive v-for, und Vue erzeugt eins für jeden Eintrag des Arrays:

<script setup>
const menue = [
    { id: 1, name: "Espresso", preis: 2 },
    { id: 2, name: "Cappuccino", preis: 3 },
    { id: 3, name: "Grüner Tee", preis: 3 },
];
</script>

<template>
    <ul>
        <li v-for="artikel in menue" :key="artikel.id">{{ artikel.name }}: {{ artikel.preis }} €</li>
    </ul>
</template>

Die Seite bekommt:

<ul>
    <li>Espresso: 2 €</li>
    <li>Cappuccino: 3 €</li>
    <li>Grüner Tee: 3 €</li>
</ul>

artikel in menue funktioniert wie for (const artikel of menue): artikel ist ein Element des Arrays nach dem anderen, und den Namen wählst du selbst. Innerhalb des Elements mit v-for, in seinem Text und in seinen Attributen, ist artikel der Eintrag, für den dieses Element steht.

:key gibt jedem Element einen Schlüssel (englisch: key), einen Wert, der für jeden Eintrag anders ist. Ändert sich das Array, vergleicht Vue die Schlüssel, um herauszufinden, welches Element zu welchem Eintrag gehört, und fügt dann nur die Elemente der geänderten Einträge hinzu, verschiebt oder entfernt sie. Der Schlüssel muss also bei seinem Eintrag bleiben: Nimm die id des Eintrags, nicht seine Position im Array. Wird ein Eintrag entfernt, rücken die Einträge danach eine Stelle auf. Mit Positionen als Schlüsseln würde Vue denken, der letzte Eintrag sei weg, und was in den Elementen selbst steht, etwa Text, der in ein Feld in einem von ihnen getippt wurde, bliebe, wo es war, und stünde am Ende neben dem falschen Eintrag. Gib v-for immer einen :key.

Steht das Array in einer Ref, folgt die Liste ihm: Mit push() fügst du einen Eintrag hinzu, und Vue ergänzt ein Element dafür. Du musst nichts leeren oder neu zeichnen.