Key attribute and why it matters in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when keys are missing in a Vue list rendering?

Consider a Vue component rendering a list of items without using key attributes. What is the most likely behavior when the list changes?

Vue

<template>
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([{ id: 1, text: 'A' }, { id: 2, text: 'B' }])
</script>

A Vue will automatically assign unique keys internally, so no issues occur.

B Vue will throw a runtime error about missing keys.

C Vue will reuse DOM elements incorrectly, causing unexpected UI updates.

D Vue will render the list twice to ensure correctness.

💡 Hint

Think about how Vue tracks elements in a list to update efficiently.

Without keys, Vue cannot reliably track which items changed, so it may reuse DOM elements incorrectly, leading to UI glitches.

❓ state_output

intermediate

What is the output when keys are reused in Vue list rendering?

Given a Vue component rendering a list with duplicate keys, what will be the output after updating the list?

Vue

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

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, text: 'First' },
  { id: 1, text: 'Duplicate' }
])
</script>

A Vue will only render one item because keys must be unique.

B Vue will crash with a runtime error.

C Vue will throw a warning but render both items anyway.

D Vue will render both items correctly with their texts.

💡 Hint

Keys must be unique to help Vue track elements properly.

Vue requires keys to be unique. Duplicate keys cause Vue to overwrite or ignore elements, so only one item renders.

📝 Syntax

advanced

Which option correctly uses the key attribute in Vue 3?

Identify the correct syntax for using the key attribute in a Vue 3 v-for loop.

Vue

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

A :key="item.id"

B v-key="item.id"

C key="item.id"

D v-bind:key="item.id"

💡 Hint

Remember how to bind dynamic attributes in Vue templates.

The correct way to bind the key attribute dynamically is :key="item.id". Using key="item.id" treats it as a string literal. v-key is invalid. v-bind:key is valid but verbose; :key is shorthand.

🔧 Debug

advanced

Why does this Vue list update cause unexpected UI behavior?

Examine the code below. After removing the first item from items, the UI does not update as expected. What is the cause?

Vue

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

<script setup>
import { ref } from 'vue'
const items = ref([
  { index: 0, text: 'One' },
  { index: 1, text: 'Two' },
  { index: 2, text: 'Three' }
])

function removeFirst() {
  items.value.shift()
}
</script>

A The shift method does not modify the reactive array properly.

B Using array index as key causes Vue to reuse DOM nodes incorrectly after removal.

C The key attribute is missing, so Vue cannot track items.

D Vue requires a unique string key, but numbers are used here.

💡 Hint

Think about what happens when keys are based on array positions and the array changes.

Using the array index as key is problematic because when items are removed or reordered, keys do not uniquely identify the same item, causing Vue to reuse DOM nodes incorrectly.

🧠 Conceptual

expert

Why is the key attribute critical for Vue's virtual DOM diffing?

Explain why Vue requires a unique key attribute on elements rendered with v-for. What role does it play in Vue's virtual DOM update process?

A Keys are used to style elements uniquely with CSS in Vue components.

B Keys allow Vue to cache component instances permanently, avoiding re-renders.

C Keys prevent Vue from rendering elements multiple times in the DOM.

D Keys help Vue identify which elements have changed, moved, or been removed, enabling efficient DOM updates.

💡 Hint

Think about how Vue compares old and new virtual DOM trees.

Vue uses keys to track elements between renders. This lets Vue detect changes precisely and update only what is necessary, improving performance and avoiding UI glitches.

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