Key attribute and why it matters in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a key attribute in a Vue list rendering.

Vue

<ul>
  <li v-for="item in items" :key="[1]">{{ item.name }}</li>
</ul>

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

Aitems

Bindex

Citem

Ditem.id

Attempts:

3 left

💡 Hint

Common Mistakes

Using the array index as the key, which can cause rendering issues.

Using the entire item object as the key, which is not a string or number.

The key attribute should be a unique identifier for each item, like item.id, to help Vue track elements efficiently.

2fill in blank

medium

Complete the code to correctly bind the key attribute in a Vue component list.

Vue

<template>
  <div>
    <ChildComponent v-for="user in users" :key="[1]" :user="user" />
  </div>
</template>

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

Auser.id

Buser.name

Cusers

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using the array itself or index as key, which can cause bugs.

Using a non-unique property like name if duplicates exist.

Using user.id as the key ensures each component instance is uniquely identified.

3fill in blank

hard

Fix the error in the Vue list rendering by completing the key attribute.

Vue

<ul>
  <li v-for="(task, idx) in tasks" :key="[1]">{{ task.title }}</li>
</ul>

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

Aidx

Btask.id

Ctasks

Dtask.title

Attempts:

3 left

💡 Hint

Common Mistakes

Using the index as key, which can cause rendering glitches when list changes.

Using a non-unique property like title.

The key should be a unique and stable identifier like task.id, not the index or title which may not be unique.

4fill in blank

hard

Fill both blanks to create a keyed list of products with unique keys.

Vue

<template>
  <div>
    <ProductCard v-for="product in products" :key="[1]" :product="[2]" />
  </div>
</template>

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

Aproduct.sku

Bproduct

Cproducts

Dproduct.id

Attempts:

3 left

💡 Hint

Common Mistakes

Using the entire products array as key or prop.

Using a non-unique property as key.

Use product.sku as a unique key and pass the whole product object as a prop.

5fill in blank

hard

Fill all three blanks to create a keyed list with a dynamic class and event handler.

Vue

<template>
  <ul>
    <li v-for="item in list" :key="[1]" :class="[2]" @click="[3](item)">
      {{ item.text }}
    </li>
  </ul>
</template>

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

Aitem.id

Bitem.active ? 'active' : ''

ChandleClick

Dlist

Attempts:

3 left

💡 Hint

Common Mistakes

Using the whole list as key or class.

Not passing the item to the click handler.

Use item.id as key, set class dynamically based on item.active, and call handleClick on click with the item.