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.