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.