Positionen und Zahlen

v-for kann dir einen zweiten Wert geben: die Position des Eintrags im Array, seinen Index. Schreibe zwei Namen in Klammern, zuerst den Eintrag und dann den Index:

<script setup>
const bestseller = [
    { id: 2, name: "Cappuccino" },
    { id: 1, name: "Espresso" },
    { id: 5, name: "Karottenkuchen" },
];
</script>

<template>
    <p v-for="(artikel, index) in bestseller" :key="artikel.id">
        {{ index + 1 }}. {{ artikel.name }}
    </p>
</template>

Die Seite zeigt:

1. Cappuccino
2. Espresso
3. Karottenkuchen

Der Index zählt wie jeder Array-Index ab 0, zeige für Zahlen, die bei 1 beginnen, also index + 1. Der Schlüssel bleibt artikel.id, obwohl der Index gleich daneben steht: Wie die vorige Übung erklärt hat, ändert sich der Index eines Eintrags, wenn ein Eintrag davor entfernt wird.

v-for kann auch zählen. Mit einer Zahl statt eines Arrays wiederholt es das Element so oft, und der Name bekommt die Zahlen ab 1, nicht ab 0, bis zu dieser Zahl:

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

Das sind drei Tassen: ☕☕☕. Die Zahlen unterscheiden sich voneinander, deshalb sind sie gute Schlüssel. Die Zahl kann auch aus deinen Daten kommen: v-for="n in artikel.bewertung" wiederholt ein Element so oft, wie die Bewertung des Eintrags sagt.