Render lists with v-for. Always provide a stable key so Vue can match rows across updates when order changes.
Syntax
<li v-for="task in tasks" :key="task.id">
{{ task.label }}
</li>You can also write (item, index) in items when you need the index—avoid using index as key for dynamic lists.
Keys
- Use stable IDs from data (
user.id), not array index—unless the list is static and never reordered. - Keys are hints for reconciliation—they do not appear in the DOM.
- Do not generate random keys on every render.
Important interview questions and answers
- Q: Why not index as key?
A: Reordering, inserting, or deleting items can attach wrong state to the wrong row. - Q: v-for with v-if on same element?
A: Avoid—filter in computed or nest elements;v-forshould have priority clarity.
Self-check
- Where does the
:keygo? - When is index-as-key acceptable?
Challenge
Task list
- Add a fourth task to the array.
- Toggle
doneon one task and confirm line-through styling.
Done when: four tasks render with stable keys and done styling.
Pitfall: Using array index as :key when items reorder causes wrong DOM reuse—prefer stable ids.