v-for with objects in Vue

Introduction

The v-for directive lets you repeat elements for each item in an object. It helps show lists or tables easily.

You want to display all keys and values from an object in a list.

You have user data stored as an object and want to show each property on the page.

You need to loop over settings or configuration stored as an object to create a form.

You want to create a table row for each property in an object.

Syntax

Vue

<element v-for="(value, key, index) in object" :key="key">{{ key }}: {{ value }}</element>

You can access the value, key, and index (position) in the loop.

Always add a unique :key to help Vue track elements efficiently.

Examples

Loop over userInfo object showing each key and value in a list item.

Vue

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

Access index i along with key and value to show position in the list.

Vue

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

Sample Program

This Vue component shows a list of user details by looping over the user object with v-for. Each key and value is displayed in a list item.

Vue

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

<script setup>
const user = {
  name: 'Alice',
  age: 30,
  city: 'Paris'
}
</script>

Important Notes

Objects do not guarantee order, so keys may appear in any order.

Use v-for with objects when you want to display all properties dynamically.

Summary

v-for can loop over objects using (value, key, index) syntax.

Always provide a unique :key for each item.

This helps display object data easily in lists or tables.

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