Ответ
Для рендера списков во Vue используется директива v-for. Она позволяет перебирать массив или объект и генерировать элементы на основе данных.
<template>
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index + 1 }}. {{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
}
}
}
</script>Ключевые моменты:
- Всегда указывайте
:keyс уникальным значением (лучше id) - Можно использовать второй параметр - индекс элемента
- Работает с массивами и объектами
- Для объектов синтаксис:
v-for="(value, key, index) in object"