v-for with objects in Vue - Step-by-Step Execution

Concept Flow - v-for with objects

Start with object

↓

Extract keys and values

↓

Loop over each key-value pair

↓

Render each pair in template

↓

Repeat until all pairs rendered

↓

End

Vue reads the object, loops over each key-value pair, and renders them one by one in the template.

Execution Sample

Vue

<template>
  <ul>
    <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>

This code loops over the 'user' object and shows each key and its value in a list.

Execution Table

Step	Current Key	Current Value	Action	Rendered Output
1	name	"Alice"	Render list item	<li>name: Alice</li>
2	age	30	Render list item	<li>age: 30</li>
3	city	"Paris"	Render list item	<li>city: Paris</li>
4	-	-	All pairs rendered	List complete with 3 items

💡 All key-value pairs in the object have been processed and rendered.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
key	-	name	age	city	-
value	-	Alice	30	Paris	-

Key Moments - 2 Insights

Why do we write (value, key) in v-for instead of just one variable?

Because v-for with objects gives both the key and the value for each pair, so you can use both in the template. See execution_table rows 1-3 where both key and value are used.

What does :key="key" do in the list items?

It helps Vue track each item uniquely for efficient updates. The key is the object property name, as shown in execution_table under 'Current Key'.

Visual Quiz - 3 Questions

Look at the execution table, what is the value when the current key is 'age'?

A "Alice"

B 30

C "Paris"

D undefined

💡 Hint

Check the row where Current Key is 'age' in the execution_table.

At which step does the loop finish rendering all object pairs?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look at the exit_note and the last row in execution_table.

If the object had a new key 'country' with value 'France', what would happen in the execution table?

A The key 'city' would be skipped.

B The loop would stop at step 3.

C A new step 4 would show key 'country' and value 'France'.

D The value 'France' would replace 'Paris'.

💡 Hint

Think about how v-for loops over all key-value pairs as shown in variable_tracker.

Concept Snapshot

v-for with objects syntax:
  v-for="(value, key) in object"
Loops over each key-value pair.
Use both key and value in template.
Add :key="key" for list rendering.
Outputs each pair as separate elements.

Full Transcript

This example shows how Vue's v-for directive loops over an object. The loop extracts each key and its value, then renders them in the template. The execution table traces each step: first rendering the 'name' key with value 'Alice', then 'age' with 30, and finally 'city' with 'Paris'. The variable tracker shows how the key and value variables change each iteration. Key moments clarify why both key and value are needed and why the :key attribute is important for Vue's rendering. The visual quiz tests understanding of the loop steps and variable values. This helps beginners see exactly how Vue processes objects with v-for.