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.

Practice

1. In Vue, when using v-for to loop over an object, which syntax correctly accesses the key and value?

easy

A. v-for="value in object"

B. v-for="(value, key) in object"

C. v-for="key in object"

D. v-for="(key, value) in object"

Solution

1. Step 1: Understand v-for syntax for objects

   Vue's v-for loops over objects using (value, key) syntax, where the first variable is the value and the second is the key.

2. Step 2: Match the correct syntax

   v-for="(value, key) in object" uses (value, key) in object, which is the correct order and syntax.

3. Final Answer:

   <code>v-for="(value, key) in object"</code> -> Option B

4. Quick Check:

   v-for object loop = (value, key) [OK]

Hint: Remember: value comes first, then key in v-for [OK]

Common Mistakes:

• Swapping key and value order
• Using only key without value
• Using array syntax for objects

2. Which of the following is the correct way to provide a unique key when looping over an object with v-for?

easy

A. :key="key"

B. :key="value.id"

C. :key="index"

D. :key="object"

Solution

1. Step 1: Identify unique key for object iteration

   When looping over an object, the key is unique for each property, so using key as the unique identifier is correct.

2. Step 2: Evaluate options

   :key="key" uses :key="key", which is correct. :key="value.id" assumes value has an id, which may not exist. :key="index" uses index which is less stable. :key="object" uses the whole object, which is invalid.

3. Final Answer:

   :key="key" -> Option A

4. Quick Check:

   Unique key = key [OK]

Hint: Use the object property name as key for uniqueness [OK]

Common Mistakes:

• Using value.id when id may not exist
• Using index which can cause rendering issues
• Using the whole object as key

3. Given the Vue template:

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

and the data:

userInfo: { name: 'Anna', age: 30 }

What will be the rendered list items?

medium

A. value: Annavalue: 30

B. Anna: name30: age

C. key: namekey: age

D. name: Annaage: 30

Solution

1. Step 1: Understand v-for output with (value, key)

   The loop outputs each key and its corresponding value from the object.

2. Step 2: Match output to data

   For name: 'Anna' and age: 30, the list items show "name: Anna" and "age: 30".

3. Final Answer:

   <ul><li>name: Anna</li><li>age: 30</li></ul> -> Option D

4. Quick Check:

   v-for object output = key: value [OK]

Hint: Remember: first is value, second is key in v-for [OK]

Common Mistakes:

• Swapping key and value in output
• Printing variable names instead of values
• Confusing key with index

4. What is wrong with this Vue snippet?

<div v-for="(key, value) in settings" :key="key">
  {{ key }}: {{ value }}
</div>

medium

A. The order of key and value is reversed in v-for

B. Missing :key binding

C. Cannot loop over objects with v-for

D. Must use index as key instead of key

Solution

1. Step 1: Check v-for variable order

   Vue expects (value, key) order when looping over objects, but here it is reversed as (key, value).

2. Step 2: Identify the error

   This reversal causes the displayed values to be incorrect and may cause runtime issues.

3. Final Answer:

   The order of key and value is reversed in v-for -> Option A

4. Quick Check:

   Correct order is (value, key) [OK]

Hint: Always put value first, then key in v-for [OK]

Common Mistakes:

• Swapping key and value order
• Forgetting :key binding
• Using index as key unnecessarily

5. You have an object with some falsy values:

const data = { a: 0, b: '', c: null, d: 'Hello' }

How can you use v-for to display only keys with truthy values?

hard

A. <div v-for="(value, key) in data" :key="key">{{ key }}: {{ value }}</div>

B. <div v-for="(value, key) in Object.entries(data)" :key="key">{{ key }}: {{ value }}</div>

C. <div v-for="(value, key) in data" v-if="value" :key="key">{{ key }}: {{ value }}</div>

D. <div v-for="(value, key) in data" v-show="value" :key="key">{{ key }}: {{ value }}</div>

Solution

1. Step 1: Filter falsy values in template

   Using v-if="value" inside the loop filters out falsy values like 0, '', and null.

2. Step 2: Check other options

   <div v-for="(value, key) in data" :key="key">{{ key }}: {{ value }}</div> shows all values including falsy. <div v-for="(value, key) in Object.entries(data)" :key="key">{{ key }}: {{ value }}</div> uses Object.entries but does not filter. <div v-for="(value, key) in data" v-show="value" :key="key">{{ key }}: {{ value }}</div> uses v-show which hides but still renders elements.

3. Final Answer:

   <div v-for="(value, key) in data" v-if="value" :key="key">{{ key }}: {{ value }}</div> -> Option C

4. Quick Check:

   Use v-if to filter falsy values [OK]

Hint: Use v-if="value" inside v-for to skip falsy values [OK]

Common Mistakes:

• Using v-show instead of v-if (renders hidden elements)
• Not filtering falsy values at all
• Trying to filter outside template without computed