v-for
Renders a list of elements by iterating an array, object, or range.
Syntax
v-for="(item, index) in items" :key="item.id"Parameters
| Name | Type | Required | Description |
|---|---|---|---|
items | array | object | number | string | No | The iterable source to render. |
Returns
directive — Renders one element per item.
Examples
<script setup lang="ts">
import { ref } from 'vue';
const todos = ref([
{ id: 1, text: 'Learn Vue' },
{ id: 2, text: 'Build app' },
]);
</script>
<template>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</template>
Notes
Always provide a stable `:key` (a unique id, not the index) so Vue can patch
the list efficiently. Supports `(value, key, index) in object` for objects
and `n in 10` for ranges. Do not use v-if and v-for on the same element;
wrap with <template> instead.