v-for with objects in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to loop over the keys of the object using v-for.

Vue

<template>
  <ul>
    <li v-for="key in [1]" :key="key">{{ key }}</li>
  </ul>
</template>

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

Drag options to blanks, or click blank then click option'

AObject.keys(user)

Buser

CObject.values(user)

Duser.keys

Attempts:

3 left

💡 Hint

Common Mistakes

Using the object directly instead of its keys.

Using Object.values instead of Object.keys.

To loop over the keys of an object in Vue, you use Object.keys(object) which returns an array of keys.

2fill in blank

medium

Complete the code to loop over the entries (key-value pairs) of the object using v-for.

Vue

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

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

Drag options to blanks, or click blank then click option'

Auser.entries()

Buser

CObject.entries(user)

DObject.keys(user)

Attempts:

3 left

💡 Hint

Common Mistakes

Using Object.keys instead of Object.entries.

Trying to call entries() directly on the object.

Object.entries(object) returns an array of [key, value] pairs, perfect for looping with destructuring in Vue.

3fill in blank

hard

Fix the error in the code by completing the v-for directive to loop over the object properties correctly.

Vue

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

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

Drag options to blanks, or click blank then click option'

Akey

Bindex

Citem

Dentry

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'index' which is for arrays, not objects.

Using 'item' or 'entry' which are not standard key names.

When looping over an object with v-for, the syntax is (value, key) in object. The second variable is the key.

4fill in blank

hard

Fill both blanks to create a computed property that returns an array of keys from the object and use it in the template with v-for.

Vue

<template>
  <ul>
    <li v-for="key in [1]" :key="key">{{ key }}</li>
  </ul>
</template>

<script setup>
import { computed } from 'vue'
const user = { name: 'Alice', age: 30, city: 'Paris' }
const keys = computed(() => [2])
</script>

Drag options to blanks, or click blank then click option'

Akeys

BObject.keys(user)

Cuser

DObject.values(user)

Attempts:

3 left

💡 Hint

Common Mistakes

Using user directly instead of the computed keys.

Using Object.values instead of Object.keys.

The computed property keys returns Object.keys(user). In the template, you use keys directly since Vue automatically unwraps refs and computed values.

5fill in blank

hard

Fill all three blanks to create a reactive object, a computed property for entries, and loop over them in the template with v-for.

Vue

<template>
  <ul>
    <li v-for="([[1], [2]]) in [3]" :key="[1]">{{ [1] }}: {{ [2] }}</li>
  </ul>
</template>

<script setup>
import { reactive, computed } from 'vue'
const user = reactive({ name: 'Alice', age: 30, city: 'Paris' })
const entries = computed(() => Object.entries(user))
</script>

Drag options to blanks, or click blank then click option'

Akey

Bvalue

Centries

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'user' instead of 'entries' in the loop.

Mixing up key and value variable names.

We destructure each entry into key and value inside the v-for. The array to loop over is the computed entries.

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