Use Vue’s v-for directive to render an element or group of elements for each entry in a collection. For most lists, write v-for="item in items"; add a stable :key when Vue needs to preserve the identity of stateful list items. In Vue 3, filter items through a computed list rather than putting v-if and v-for on the same element.
Render an array with v-for
In Vue 3, the usual pattern is item in items. The name before in is an alias scoped to the current iteration; items is the array or other supported source. You can use of instead of in.
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }} — {{ item.message }}
</li>
</ul>The second alias, index, is the zero-based position in the array. The index is useful for display or position-based logic, but it is usually not a good key for a reorderable list. See Vue’s List Rendering guide for the Vue 3 syntax and examples.
Choose the right v-for source
Vue 3 supports arrays, objects, numbers, strings, and iterables such as native Map and Set. Choose the source based on the data you actually need to display; if ordering matters, make that order explicit rather than relying on object properties.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall#1 Best Overall
| Source | Example | What the aliases represent |
|---|---|---|
| Array | v-for="(item, index) in items" |
Each array item and its zero-based index. |
| Object | v-for="(value, key, index) in object" |
The property value, property key, and iteration index. Vue’s current guide describes object iteration order as following Object.values(); do not use property order as a sorting mechanism. |
| Integer range | v-for="n in 5" |
Values from 1 through 5, not from 0 through 4. |
| String or iterable | v-for="character in text" |
Each yielded value. The built-in directive reference also lists native Map and Set as supported sources. |
For full syntax details, see Vue’s Built-in Directives reference.
Use keys when list items have identity or state
Without keys, Vue’s default list update strategy patches nodes in place by position. That can be efficient for simple, stateless output, but it can associate a reused node with the wrong item after a reorder when the output contains component state or temporary DOM state, such as an input’s current value.
Give stateful or reorderable items a unique, stable primitive key—commonly a string or number ID—so Vue can track which rendered node belongs to which item. Avoid using an array index as the key when items may move, be inserted, or be removed, unless position itself is intentionally the item’s identity.
<li v-for="todo in todos" :key="todo.id">
<input v-model="todo.text">
</li>When one source item needs to produce several sibling elements, wrap them in <template v-for> and put the key on that template wrapper:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →<template v-for="item in items" :key="item.id">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</template>Filter or hide a list without combining directives on one node
Do not put v-if and v-for on the same element. Vue evaluates v-if first, so that condition cannot access the iteration alias declared by v-for. Vue’s essential style guide flags this pattern to avoid.
Filter individual items with a computed list
For a filtered or sorted view, derive a display list with a computed property and iterate over it. This keeps the source collection separate from its presentation:
<script setup>
import { computed, ref } from 'vue'
const items = ref([
{ id: 1, name: 'Desk', active: true },
{ id: 2, name: 'Lamp', active: false }
])
const activeItems = computed(() =>
items.value.filter(item => item.active)
)
</script>
<template>
<ul>
<li v-for="item in activeItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>Array methods such as filter, concat, and slice return a new array rather than mutating the original. A computed display list can use these to derive results without replacing the source data.
Hide an item or the whole list
If the condition applies to an individual item and a computed list is not appropriate, put v-if on a child inside a <template v-for>, where it can access the iteration alias. If the condition should hide the entire list, put v-if on the list’s container instead. See Vue’s Conditional Rendering guide for the directive’s behavior.
Update, sort, or reverse a list safely
Vue observes array mutation methods including push, pop, shift, unshift, splice, sort, and reverse, and updates the rendered list when they change the array. Non-mutating methods such as filter, concat, and slice return a new array; assign that result when you intend to replace the list.
Because sort() and reverse() mutate their array, do not call them directly on the source array from a computed getter if the source should remain unchanged. Copy first:
const sortedNumbers = computed(() =>
[...numbers.value].sort((a, b) => a - b)
)Check your Vue version before using examples
This article uses Vue 3 syntax and guidance. Vue 2 has its own list-rendering guide, so check the documentation for your project’s major version before carrying an older example or API detail into a Vue 3 component. The separate Vue 2 List Rendering guide covers that version.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
