Key attribute and why it matters in Vue - Mini Project: Build & Apply

Understanding the Key Attribute in Vue

📖 Scenario: You are building a simple Vue app that shows a list of fruits. You want to understand how Vue uses the key attribute to keep track of each fruit when the list changes.

🎯 Goal: Create a Vue component that renders a list of fruits using v-for. Add a key attribute to each list item to help Vue track them efficiently.

📋 What You'll Learn

Create a list of fruits as an array of objects with id and name properties

Add a variable to hold the selected fruit's id

Use v-for to loop over the fruits and render each fruit's name in a list item

Add a key attribute to each list item using the fruit's id

Add a click event to each list item to update the selected fruit's id

💡 Why This Matters

🌍 Real World

Lists of items are common in web apps, like menus, product lists, or messages. Using keys helps Vue update only what changed, making apps faster and smoother.

💼 Career

Understanding keys is essential for frontend developers working with Vue to build efficient, bug-free user interfaces.

1

Create the fruits data array

Create a fruits array in the setup function with these exact objects: { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Cherry' }.

Vue

// Create the fruits array here
// Your code here



  
  

Hint

Use ref from Vue to create a reactive array called fruits.

2

Add a selectedFruitId variable

Add a selectedFruitId variable using ref and set its initial value to null inside the setup function.

Vue

import { ref } from 'vue'

const fruits = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
])

// Add selectedFruitId variable here
// Your code here



  
  

Hint

Use ref(null) to create a reactive variable called selectedFruitId.

3

Render the fruits list with v-for and key

Inside the <ul> tag, use v-for to loop over fruits with variables fruit and index. Render each fruit's name inside a <li>. Add a :key attribute to each <li> using fruit.id.

Vue

import { ref } from 'vue'

const fruits = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
])

const selectedFruitId = ref(null)



  
    
    
  

Hint

Use v-for="(fruit, index) in fruits" and add :key="fruit.id" to each <li>.

4

Add click event to update selectedFruitId

Add a @click event to each <li> that sets selectedFruitId.value to fruit.id. Also, add a class binding that adds the class selected when fruit.id === selectedFruitId.value.

Vue

import { ref } from 'vue'

const fruits = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
])

const selectedFruitId = ref(null)



  
    
      {{ fruit.name }}
    
  

Hint

Use @click="selectedFruitId.value = fruit.id" and bind class with :class="{ selected: fruit.id === selectedFruitId.value }".

Practice

1. Why is the key attribute important when rendering lists in Vue?

easy

A. It helps Vue track each item uniquely to update the list efficiently.

B. It changes the style of list items automatically.

C. It disables reactivity for list items.

D. It sorts the list items alphabetically.

Solution

1. Step 1: Understand Vue's list rendering

   Vue uses the key attribute to identify each item uniquely when rendering lists.

2. Step 2: Recognize the role of key

   This unique key helps Vue efficiently update only changed items instead of re-rendering the whole list.

3. Final Answer:

   It helps Vue track each item uniquely to update the list efficiently. -> Option A

4. Quick Check:

   Unique keys improve list update efficiency = A [OK]

Hint: Keys uniquely identify list items for efficient updates [OK]

Common Mistakes:

• Thinking keys change styles automatically
• Believing keys disable reactivity
• Assuming keys sort the list

2. Which of the following is the correct way to use the key attribute in a Vue v-for loop?

easy

A. <li v-for="item in items" :key="index">{{ item }}</li>

B. <li v-for="item in items" :key="items">{{ item }}</li>

C. <li v-for="item in items" key="item">{{ item }}</li>

D. <li v-for="item in items" :key="item.id">{{ item.name }}</li>

Solution

1. Step 1: Check the key binding syntax

   The key attribute should be bound with : to a unique and stable value, like item.id.

2. Step 2: Identify the correct unique key usage

   <li v-for="item in items" :key="item.id">{{ item.name }}</li> uses :key="item.id", which is correct and stable for each item.

3. Final Answer:

   <li v-for="item in items" :key="item.id">{{ item.name }}</li> -> Option D

4. Quick Check:

   Use :key with unique id = D [OK]

Hint: Use :key with a unique item property, not index [OK]

Common Mistakes:

• Using index as key which can cause bugs
• Not binding key with : causing string literal
• Using the whole array as key

3. Given the code below, what will be the rendered list after the items array changes?

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
])

// Later update
items.value = [
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
  { id: 4, name: 'Date' }
]
</script>

medium

A. BananaCherryDate

B. AppleBananaCherry

C. DateBananaCherry

D. BananaDateCherry

Solution

1. Step 1: Understand the key-based update

   Vue uses the key attribute to match existing DOM elements with new data by id.

2. Step 2: Match items by id and update list

   Items with id 2 and 3 remain, item with id 1 is removed, and item with id 4 is added at the end.

3. Final Answer:

   <ul><li>Banana</li><li>Cherry</li><li>Date</li></ul> -> Option A

4. Quick Check:

   Keys track items by id, so list updates correctly = C [OK]

Hint: Keys keep items matched by id, so order updates correctly [OK]

Common Mistakes:

• Assuming old items stay without keys
• Thinking new items replace all old items
• Ignoring the order change in the array

4. What is the problem with this Vue code snippet?

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
</ul>

Assuming items can be reordered or changed dynamically.

medium

A. The key attribute is missing a colon for binding.

B. Using index as key can cause incorrect DOM updates when list changes.

C. The v-for syntax is invalid without parentheses.

D. The item.name interpolation is incorrect.

Solution

1. Step 1: Identify the key usage problem

   Using the loop index as key is unstable when the list changes order or items are added/removed.

2. Step 2: Understand the impact on DOM updates

   This causes Vue to reuse DOM elements incorrectly, leading to bugs like wrong item content or lost input focus.

3. Final Answer:

   Using index as key can cause incorrect DOM updates when list changes. -> Option B

4. Quick Check:

   Index keys cause update bugs = B [OK]

Hint: Never use index as key if list can reorder [OK]

Common Mistakes:

• Thinking index keys are always safe
• Missing colon on key attribute
• Confusing v-for syntax errors

5. You have a list of users where some users share the same name but have unique IDs. You want to render this list with Vue's v-for. Which key choice is best to avoid rendering bugs and improve performance?

hard

A. Use the user's index in the array as the key.

B. Use the user's name as the key.

C. Use the user's unique ID as the key.

D. Do not use any key attribute.

Solution

1. Step 1: Analyze uniqueness requirement for keys

   Keys must be unique and stable for each item to help Vue track them correctly.

2. Step 2: Evaluate each option

   Using the unique ID is best because it is unique and stable. Names are not unique if duplicated. Index is unstable if the list changes. No key causes inefficient updates.

3. Final Answer:

   Use the user's unique ID as the key. -> Option C

4. Quick Check:

   Unique stable ID keys prevent bugs = A [OK]

Hint: Always pick unique stable IDs as keys, never names or indexes [OK]

Common Mistakes:

• Using non-unique keys like names
• Using index keys causing bugs on reorder
• Skipping keys causing slow updates