Vue 7: List Rendering with v-for
easy⏱ 5 mincoursevue
(item, index) in items
The basic form is v-for="item in items". When you also need the position, destructure it as v-for="(item, index) in items" — index is zero-based and updates automatically as the array changes.
<li v-for="(todo, index) in todos" :key="todo.id">
{{ index + 1 }}. {{ todo.text }}
</li>
Always use a stable :key
Using the array index as :key breaks the moment the list is reordered, filtered, or has an item removed from the middle — Vue can end up reusing the wrong DOM node's internal state (like input focus or values) for the wrong item, because it matched by position instead of identity. Always use a real unique id from your data instead.
<!-- Risky: breaks if the list is ever reordered/filtered -->
<li v-for="(todo, index) in todos" :key="index">...</li>
<!-- Correct: a stable identity that travels with the data -->
<li v-for="todo in todos" :key="todo.id">...</li>
Build the todo list
In data(), add a todos array of { id, text, done } objects. Render them with v-for, keyed by todo.id, let a click toggle done, and add a button that pushes a new todo.