v-for List Rendering Directive
Last updated: 2026-10-22
v-for List Rendering Directive
v-for renders a list of elements by iterating an array or object with the syntax item in items. Always provide a key for efficient updates.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>
<!-- object iteration -->
<div v-for="(value, key) in object"></div>⚙️ Arguments
| expression | An iterable (array/object/number/string); the second argument is the index or key |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
Three list items render: 1. HTML, 2. CSS, 3. JavaScript.💡 Key Points
⚠️ Warning Always provide a unique key (use an id, not the index): index keys break state on insert/remove.
⚠️ Warning Do not pair v-for with v-if on one element: wrap the v-for element in a template and put v-if inside.
💡 Tip Array mutation methods (push/splice/sort) are tracked; assigning arr[0] = x directly is not.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why does the key matter so much?
A The key identifies nodes: index keys cause stale state to attach to the wrong row on insert/remove.
Q Why does arr[0] = x not trigger an update?
A Vue 3 proxies can track index writes through the reactive proxy; plain arrays are not observed.
Q Can v-for and v-if share an element?
A Not recommended: v-if runs first without the loop variable. Wrap with an outer template.
