Skip to content

v-for Directive

v-for renders a list from an array/object. Always provide a stable :key. This lesson covers practical patterns, syntax, and mistakes to avoid.

Rendering Lists with v-for

v-for renders a list from an array/object. Always provide a stable :key.

Prefer item IDs as keys when lists are reordered or filtered.

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

Keyed list rendering.

Patterns

index as fallback, destructure `(item, index)`, iterate objects
  • Prefer Vue 3 + Composition API.
  • Use script setup for SFCs.
  • Keep components focused.
  • Lean on official docs.

v-for Directive Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
key required style Stable
index last resort Static
template v-for multi-root Group
computed filter/sort Derive
avoid v-if same node Rule
track mutation methods Array

Array Changes

Vue wraps mutating methods; replace arrays immutably when clearer.

Common Mistakes

  • Missing keys.
  • Using index keys with sortable lists.

Key Takeaways

  • v-for Directive is a core Vue skill.
  • Practice in a Vite app.
  • Prefer clarity.
  • Revisit docs for edge cases.

Pro Tip

Filter/sort in computed properties, not heavy template expressions.

You now understand v-for directive. Next, continue with Props to keep building your Vue skills.