Позиции и числа

v-for может дать и второе значение: позицию элемента в массиве, его индекс. Запишите в скобках два имени: сначала элемент, потом индекс:

<script setup>
const bestSellers = [
    { id: 2, name: "Капучино" },
    { id: 1, name: "Эспрессо" },
    { id: 5, name: "Морковный торт" },
];
</script>

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

Страница покажет:

1. Капучино
2. Эспрессо
3. Морковный торт

Индекс считается с 0, как и индексы массива, поэтому для номеров, которые начинаются с 1, показывайте index + 1. Ключом остаётся item.id, хотя индекс под рукой: как объяснялось в предыдущем упражнении, индекс элемента меняется, когда удаляют элемент перед ним.

v-for умеет и считать. Если вместо массива указать число, он повторит элемент столько раз, а имя получит значения не с 0, а с 1 и до этого числа:

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

Это три чашки: ☕☕☕. Числа различаются между собой, поэтому подходят в качестве ключей. Число может прийти и из ваших данных: v-for="n in item.rating" повторяет элемент столько раз, сколько указано в рейтинге позиции.