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.