v-for with objects in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Vue component?

Consider this Vue 3 component using v-for to loop over an object:

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

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

What will be the rendered list items?

Vue

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

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

A <li>name: Alice</li><li>city: Paris</li><li>age: 30</li>

B <li>Alice: name</li><li>30: age</li><li>Paris: city</li>

C <li>name: Alice</li><li>age: 30</li><li>city: Paris</li>

D <li>0: name</li><li>1: age</li><li>2: city</li>

💡 Hint

Remember that v-for with objects iterates over keys and values in the order they are defined.

The v-for directive loops over the userInfo object. The first argument is the value, the second is the key. So it renders each key and its corresponding value in order.

📝 Syntax

intermediate

Which option correctly uses v-for to iterate over an object?

Given the object const data = {a: 1, b: 2}, which Vue template snippet correctly iterates over it?

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

B <li v-for="key, value in data" :key="key">{{ key }} - {{ value }}</li>

C <li v-for="item in data" :key="item">{{ item }}</li>

D <li v-for="(key, value) of data" :key="key">{{ key }}: {{ value }}</li>

💡 Hint

Remember the correct order of arguments in v-for when iterating objects.

The correct syntax for iterating over an object is (value, key) in object. Option A follows this pattern.

🔧 Debug

advanced

Why does this Vue component throw an error?

Examine this Vue 3 component snippet:

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

<script setup>
const info = { x: 10, y: 20 }
</script>

What causes the error?

Vue

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

<script setup>
const info = { x: 10, y: 20 }
</script>

A The :key attribute cannot use 'key' when iterating objects.

B Vue does not support v-for on objects, only arrays.

C The object 'info' is not reactive, causing the error.

D The order of arguments in v-for is reversed; it should be (value, key) in info.

💡 Hint

Check the order of the variables inside the parentheses in v-for.

When iterating objects, the first variable is the value, the second is the key. The code reverses this, causing Vue to misinterpret the variables and throw an error.

❓ state_output

advanced

What is the value of count after this Vue component runs?

Given this Vue 3 component:

<template>
  <div>
    <p v-for="(val, key) in items" :key="key">{{ key }}: {{ val }}</p>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const items = reactive({ a: 1, b: 2 })
const count = ref(0)

function increment() {
  for (const key in items) {
    items[key]++
    count.value++
  }
}
</script>

If the user clicks the Increment button once, what is the value of count?

Vue

<template>
  <div>
    <p v-for="(val, key) in items" :key="key">{{ key }}: {{ val }}</p>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const items = reactive({ a: 1, b: 2 })
const count = ref(0)

function increment() {
  for (const key in items) {
    items[key]++
    count.value++
  }
}
</script>

A 2

B 1

C 0

D 3

💡 Hint

Count increases once for each key in the object during the loop.

The increment function loops over two keys ('a' and 'b'). For each key, it increments count.value by 1. So after one click, count is 2.

🧠 Conceptual

expert

Which statement about v-for with objects in Vue 3 is TRUE?

Choose the correct statement about using v-for to iterate over objects in Vue 3.

A The order of iteration over object keys is guaranteed to be the same as insertion order in all browsers.

B You must always provide a unique <code>:key</code> when using <code>v-for</code> with objects to avoid rendering issues.

C Vue 3 automatically converts objects to arrays internally when using <code>v-for</code>.

D You cannot access both key and value simultaneously in <code>v-for</code> when iterating objects.

💡 Hint

Think about best practices for rendering lists in Vue.

Providing a unique :key is important for Vue to track elements efficiently and avoid rendering bugs. This applies to objects as well as arrays.

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