v-for with objects in Vue - Mini Project: Build & Apply

Using v-for to Loop Over Objects in Vue

📖 Scenario: You are building a simple Vue app that shows a list of fruits and their colors. The data is stored as an object where each fruit name is a key and its color is the value.

🎯 Goal: Create a Vue component that uses v-for to loop over the fruit-color object and display each fruit with its color in a list.

📋 What You'll Learn

Create a Vue component with a data object called fruits containing fruit-color pairs

Add a variable called fruitKeys that holds the keys of the fruits object

Use v-for with fruitKeys to loop over the fruits and display each fruit and its color

Add a unique :key binding for each list item using the fruit name

💡 Why This Matters

🌍 Real World

Looping over objects is common when you have data stored as key-value pairs, like user settings or product details, and want to display them in a list.

💼 Career

Understanding how to use v-for with objects is essential for Vue developers to efficiently render dynamic lists from object data.

1

Create the fruits object

In the Vue component's setup script, create a constant called fruits that is an object with these exact entries: apple: 'red', banana: 'yellow', grape: 'purple'.

Vue

// Create the fruits object here
// Your code here



  
    
  

Hint

Use const fruits = { apple: 'red', banana: 'yellow', grape: 'purple' } inside the <script setup> block.

2

Create fruitKeys array from fruits object

Add a constant called fruitKeys inside the <script setup> block that stores the keys of the fruits object using Object.keys(fruits).

Vue

const fruits = { apple: 'red', banana: 'yellow', grape: 'purple' }
// Create fruitKeys array here
// Your code here



  
    
  

Hint

Use const fruitKeys = Object.keys(fruits) to get the keys from the fruits object.

3

Use v-for to loop over fruitKeys and display fruit and color

Inside the <template>, add a <li> element inside the <ul> that uses v-for="fruit in fruitKeys" to loop over fruitKeys. Inside each <li>, display the fruit name and its color from fruits[fruit].

Vue

const fruits = { apple: 'red', banana: 'yellow', grape: 'purple' }
const fruitKeys = Object.keys(fruits)



  
    
    
  

Hint

Use <li v-for="fruit in fruitKeys" :key="fruit">{{ fruit }} is {{ fruits[fruit] }}</li> inside the <ul>.

4

Add accessibility and finalize the list

Add an aria-label attribute with the value Fruit colors list to the <ul> element to improve accessibility.

Vue

const fruits = { apple: 'red', banana: 'yellow', grape: 'purple' }
const fruitKeys = Object.keys(fruits)



  
  
    
      {{ fruit }} is {{ fruits[fruit] }}
    
  

Hint

Add aria-label="Fruit colors list" to the <ul> tag for screen readers.

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