v-for for list rendering in Vue - Step-by-Step Execution

Concept Flow - v-for for list rendering

Start with array data

↓

Vue template reads v-for directive

↓

Loop over each item in array

↓

Create DOM element for each item

↓

Insert elements into parent container

↓

Render list on page

Vue reads the v-for directive, loops over the array, creates elements for each item, and renders them inside the parent container.

Execution Sample

Vue

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

<script setup>
const items = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }]
</script>

This code loops over the items array and renders each item's name inside a list item.

Execution Table

Step	Action	Current Item	DOM Element Created	Parent Container
1	Start loop	N/A	N/A	<ul> (empty)</ul>
2	Process first item	{ id: 1, name: 'Apple' }	<li>Apple</li>	<ul><li>Apple</li></ul>
3	Process second item	{ id: 2, name: 'Banana' }	<li>Banana</li>	<ul><li>Apple</li><li>Banana</li></ul>
4	Loop ends	N/A	N/A	<ul><li>Apple</li><li>Banana</li></ul>

💡 All items processed, loop ends and list is fully rendered.

Variable Tracker

Variable	Start	After 1	After 2	Final
items	[{id:1,name:'Apple'},{id:2,name:'Banana'}]	Same	Same	Same
item	N/A	{id:1,name:'Apple'}	{id:2,name:'Banana'}	N/A

Key Moments - 2 Insights

Why do we need to use :key with v-for?

The :key helps Vue track each item uniquely during updates, so it can efficiently update only changed elements. See execution_table rows 2 and 3 where each item creates a separate <li>.

What happens if the array is empty?

If the array is empty, the loop does not run and no list items are created. The parent container remains empty, as shown in execution_table step 1 before looping starts.

Visual Quiz - 3 Questions

Look at the execution table, what is the DOM content inside <ul> after step 3?

A <li>Apple</li>

B <li>Apple</li><li>Banana</li>

C Empty <ul>

D <li>Banana</li>

💡 Hint

Check the 'Parent Container' column at step 3 in the execution_table.

At which step does the loop finish processing all items?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Look at the 'Action' column for the step where the loop ends in the execution_table.

If the items array had 3 objects, how many <li> elements would be created?

A 3

B 2

C 1

D 0

💡 Hint

Refer to the pattern in execution_table rows 2 and 3 where each item creates one

.

Concept Snapshot

v-for directive loops over arrays or objects.
Syntax: v-for="item in items".
Use :key for unique identification.
Creates one DOM element per item.
Renders list inside parent container.
Efficient updates with keys.

Full Transcript

The v-for directive in Vue loops over an array or object to render a list of elements. Vue reads the v-for, then for each item in the array, it creates a DOM element, like a list item, and inserts it into the parent container. Using a unique :key helps Vue track each element for efficient updates. If the array is empty, no elements are created. This process repeats until all items are rendered, producing a visible list on the page.

Practice

1. What does the v-for directive do in Vue.js?

easy

A. It repeats an element or component for each item in a list.

B. It conditionally shows or hides an element.

C. It binds a value to an input element.

D. It listens for user events like clicks.

Solution

1. Step 1: Understand the purpose of v-for

   The v-for directive is used to loop over arrays or objects and render elements multiple times.

2. Step 2: Compare with other directives

   Other directives like v-if control visibility, v-bind binds data, and v-on listens to events, so they do not repeat elements.

3. Final Answer:

   It repeats an element or component for each item in a list. -> Option A

4. Quick Check:

   v-for = repeat elements [OK]

Hint: Remember: v-for means 'for each' in a list [OK]

Common Mistakes:

• Confusing v-for with v-if for conditional rendering
• Thinking v-for binds data instead of looping
• Mixing v-for with event listeners like v-on

2. Which of the following is the correct syntax to render a list of items using v-for in Vue?

easy

A. <li v-for="item of items">{{ item }}</li>

B. <li v-for="items in item">{{ item }}</li>

C. <li v-for="item in items">{{ item }}</li>

D. <li v-for="items of item">{{ items }}</li>

Solution

1. Step 1: Identify correct v-for syntax

   The correct syntax is v-for="item in items" where items is the array and item is the loop variable.

2. Step 2: Check each option

   <li v-for="item in items">{{ item }}</li> uses correct syntax and variable names. Options B, C, and D have incorrect order or variable names.

3. Final Answer:

   <li v-for="item in items">{{ item }}</li> -> Option C

4. Quick Check:

   Use v-for="item in items" [OK]

Hint: Use 'item in items' to loop correctly [OK]

Common Mistakes:

• Swapping 'item' and 'items' in the syntax
• Using 'of' instead of 'in' (Vue uses 'in')
• Using plural for loop variable instead of singular

3. Given the Vue template:

<ul>
  <li v-for="(fruit, index) in fruits" :key="index">{{ index }} - {{ fruit }}</li>
</ul>

and the data:

fruits: ['Apple', 'Banana', 'Cherry']

What will be the rendered output?

medium

A. index - fruitindex - fruitindex - fruit

B. Apple - 0Banana - 1Cherry - 2

C. AppleBananaCherry

D. 0 - Apple1 - Banana2 - Cherry

Solution

1. Step 1: Understand the loop variables

   The v-for uses (fruit, index) in fruits, so index is the position and fruit is the item.

2. Step 2: Substitute values in template

   Each
3. shows "index - fruit". For the array ['Apple', 'Banana', 'Cherry'], indexes are 0,1,2 respectively.

4. Final Answer:

   <ul><li>0 - Apple</li><li>1 - Banana</li><li>2 - Cherry</li></ul> -> Option D

5. Quick Check:

   Index and fruit displayed correctly [OK]

Hint: Remember: (item, index) in list shows index first [OK]

Common Mistakes:

• Mixing order of index and item in output
• Forgetting to use :key with index
• Assuming 'of' works instead of 'in'

4. What is wrong with this Vue template snippet?

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Given the data:

items: null

What will happen when Vue tries to render this?

medium

A. It will render nothing without error.

B. It will throw a runtime error because items is null.

C. It will render one empty list item.

D. It will render the string 'null' inside a list item.

Solution

1. Step 1: Understand v-for expects iterable data

   The v-for directive requires an array or object to loop over. If items is null, it is not iterable.

2. Step 2: Predict Vue behavior on null

   Vue will throw a runtime error because it cannot iterate over null.

3. Final Answer:

   It will throw a runtime error because items is null. -> Option B

4. Quick Check:

   v-for needs iterable data [OK]

Hint: v-for needs arrays or objects, not null [OK]

Common Mistakes:

• Assuming null renders empty list silently
• Expecting v-for to handle null gracefully
• Confusing null with empty array []

5. You have a nested array of user objects grouped by city:

const usersByCity = {
  'New York': [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
  'Paris': [{ id: 3, name: 'Claire' }]
}

How do you use v-for to render a list showing city names and their users' names inside each city?

hard

A. <div v-for="(users, city) in usersByCity" :key="city">
<h3>{{ city }}</h3>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>

B. <div v-for="city in usersByCity" :key="city">
<h3>{{ city }}</h3>
<ul>
<li v-for="user in city" :key="user.id">{{ user.name }}</li>
</ul>
</div>

C. <div v-for="(city, users) in usersByCity" :key="city">
<h3>{{ city }}</h3>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>

D. <div v-for="user in usersByCity" :key="user.id">
<h3>{{ user.city }}</h3>
<ul>
<li>{{ user.name }}</li>
</ul>
</div>

Solution

1. Step 1: Understand the data structure

   usersByCity is an object where keys are city names and values are arrays of user objects.

2. Step 2: Use v-for to loop over object entries

   Use v-for="(users, city) in usersByCity" to get city name and users array. Then loop over users array inside.

3. Step 3: Check options for correct variable order and keys

   <div v-for="(users, city) in usersByCity" :key="city"> <h3>{{ city }}</h3> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> correctly uses (users, city) and nested v-for with keys. <div v-for="(city, users) in usersByCity" :key="city"> <h3>{{ city }}</h3> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> swaps city and users order incorrectly. Options B and D misuse variables.

4. Final Answer:

   Option A code snippet correctly renders cities and their users. -> Option A

5. Quick Check:

   Object loop: (value, key) = (users, city) [OK]

Hint: For objects, v-for uses (value, key) in object [OK]

Common Mistakes:

• Swapping key and value order in v-for
• Using array syntax for object iteration
• Missing unique :key on nested loops