Why should v-if and v-for not be on the same element?

v-if runs first, before the loop variable exists

List Rendering in Vue.js

By Syncfusion®, Inc. · Last updated November 14, 2026

v-for over arrays, objects and ranges, item, index, key and value, why every item needs a stable key and why not the index, v-for on <template>, components in lists, why v-if and v-for do not share an element, filtering and sorting with computed, and array change detection.

Lists

Most pages show lists: dishes, orders, reviews.
Writing one <li> per item by hand does not work when the data changes.
v-for repeats an element once for each item in your data.
When the data changes, the list on screen changes too.

Simple lesson: v-for turns a list of data into a list on the page.

A Real-World Example

Meera keeps her menu as an array of dishes.
The page must show one row per dish, with its price.
When she adds a dish, a new row must appear.

What happened: one <li> was made for each dish.
push added a dish, and a new row appeared.

What You Will Learn

How to loop over an array with v-for.
How to get the index too.
How to loop over an object and a number range.
Why every item needs a :key.
Why the index is a bad key.
How to repeat a group with <template v-for>.
How to show components in a list.
How to filter and sort with computed.
Which array changes Vue sees.

v-for over Arrays

v-for="item in items" repeats the element for each item.
item is a name you choose. It holds the current item.
v-for="(item, index) in items" also gives the position, starting at 0.
You can use of instead of in. They work the same.
You can destructure the item: v-for="({ id, name }, index) in dishes".

v-for over Objects

v-for="value in object" loops over the values.
(value, key) adds the property name.
(value, key, index) adds the position.

v-for over a Range

v-for="n in 5" repeats 5 times.
n starts at 1, not 0. It goes 1, 2, 3, 4, 5.

Simple lesson: v-for loops over arrays, objects and number ranges.

Keys

:key gives each item a name Vue can recognise.
When the list changes, Vue matches old and new items by their key.
A matched item is moved, not rebuilt. Its state stays with it.
A key must be unique and stable. Stable = the same item always has the same key.
An id from your data is the best key.

Animation: Dosa is removed from the top of a list. With index keys, the note box that belonged to Dosa now sits next to Idli. With id keys, each note stays with its own dish

:key="index" :key="dish.id"

Dosa

Idli "extra chutney" "no onion" Idli now has Dosa's note! Dosa"extra chutney" Idli"no onion" Each note moved with its dish.

Remove Dosa from the top of the list.

Index keys shift when an item is removed. Id keys stay with their item.

Why Not the Index?

The index of an item changes when items are added, removed or sorted.
Vue then thinks a different item is the old one, and reuses the wrong element.
Anything typed into that element stays in the wrong row.
Try it: type a note next to Dosa in both lists, then press Remove first.

What happened: in the first list, your Dosa note jumped to Idli.
In the second list, the note left with Dosa.

Never use the index or Math.random() as a key when the list can change. Use an id that belongs to the item.

Simple lesson: give every item a unique, stable :key, like its id.

Repeating Groups and Components

<template v-for> repeats several elements together, without a wrapper tag.
You can use v-for on your own components, too.
Pass each item in with a prop. You will learn props in Props and Events.

Simple lesson: <template v-for> repeats groups. Components can be repeated like elements.

Filtering and Sorting

Do not put v-if and v-for on the same element.
v-if runs first, before the loop variable exists. You get an error.
Instead, make a filtered list with computed, then loop over it.
To sort, copy the array first with [...list]. sort() changes the array it is called on.

To hide one item inside a loop, put v-if on an inner element or on a <template v-for> wrapper's child. But a computed filtered list is clearer and faster.

Simple lesson: filter and sort in a computed. Loop over the result.

Array Change Detection

Mutating methods change the array itself: push, pop, shift, unshift, splice, sort, reverse.
Vue sees all of them and updates the list.
Non-mutating methods return a new array: filter, map, concat, slice.
They do not change the original. Assign the result to update the list.

Vue reuses the rows that match by key when you replace an array. Replacing a list with a filtered copy is cheap.

Simple lesson: mutating methods update the list. For filter and map, assign the new array.

TL;DR

v-for="item in items" = repeats an element for each item.
(item, index) = the item and its position, from 0.
(value, key, index) in obj = loops over an object.
n in 5 = repeats 5 times. n goes from 1 to 5.
:key = a unique, stable name per item. Use an id.
Index as key = breaks when items are added, removed or sorted.
<template v-for> = repeats a group without a wrapper.
v-if + v-for = never on one element. Filter with computed.
filter / map = return a new array. Assign it.

Common mistakes

Mistake	Wrong idea	Correct idea	What goes wrong
No `:key`	Vue matches items by itself	Add `:key="item.id"`	Warnings, and state jumps between rows
Index as key	The position is a fine name	Use an id from the data	Typed text and focus move to the wrong row
`v-if` with `v-for` on one tag	Vue filters while looping	Loop over a computed filtered list	An error: the loop variable is not defined
Range starting at 0	`n in 3` gives 0, 1, 2	It gives 1, 2, 3	Off-by-one labels
`list.value.filter(...)` alone	filter changes the array	Assign: `list.value = list.value.filter(...)`	Nothing changes on screen
Sorting the original in a computed	`sort()` makes a copy	Use `[...list].sort()`	Your source data changes order

Check Yourself

Exercises

What to Remember

v-for works on arrays, objects and number ranges (from 1).
Every item needs a unique, stable :key, usually its id.
Index keys move typed text and focus to the wrong row.
Filter and sort in a computed, never with v-if on the same tag.
push, splice and sort update the list. Assign the result of filter and map.

Next: Events and Forms