How does list rendering with v-for work and why is the key attribute important?
Understand how v-for renders lists in Vue and why the key attribute matters for stable identity, correct DOM reuse, and fast list diffing.
Expected Interview Answer
v-for renders a list of elements by iterating over an array, object, number, or string, and the key attribute gives each rendered item a stable, unique identity so Vue can track and patch nodes efficiently.
You write v-for="(item, index) in items" and Vue produces one element per entry. Without a key, Vue uses an in-place patch strategy that reuses DOM nodes by position, which can attach the wrong internal state to the wrong item after reordering or insertion. Providing :key with a stable unique id lets Vue match old and new nodes by identity, moving and reusing them correctly instead of mutating them in place.
- Iterates arrays, objects, ranges, and strings with one directive
- Keys give correct DOM reuse on reorder and insert
- Prevents stale component state bugs in lists
- Improves diffing performance for large lists
- Access to index and, for objects, the key name
AI Mentor Explanation
v-for is like reading out a batting order one player at a time to fill the scorecard. The key is each player's jersey number: if you only track them by their spot in the line-up and two batters swap positions, the runs get logged against the wrong name. Unique jersey numbers ensure every score sticks to the right player even when the order changes.
Step-by-Step Explanation
Step 1
Write the loop
Use v-for="(item, index) in items" on the element you want repeated, one per array entry.
Step 2
Add a stable key
Bind :key to a unique, unchanging id from the data, such as item.id — never a random value regenerated each render.
Step 3
Avoid index as key when the list mutates
Index changes on insert/reorder, defeating the purpose; only use it for static lists that never change order.
Step 4
Iterate other sources
v-for also works over objects (value, key, index), a number range, and strings.
Step 5
Keep v-for and v-if apart
Do not put v-if on the same element as v-for; filter with a computed property instead.
What Interviewer Expects
- Correct v-for syntax over arrays and objects
- Explains what a key is and why it must be unique and stable
- Understands the in-place patch problem without keys
- Knows why array index makes a poor key for dynamic lists
- Advises against v-if on the same element as v-for
Common Mistakes
- Omitting :key entirely on a dynamic list
- Using the array index as key when items reorder or get inserted
- Using a non-unique or regenerated value as key
- Combining v-if and v-for on the same element
- Assuming keys are only for performance, not correctness
Best Answer (HR Friendly)
“v-for is how Vue repeats an element for each item in a list, like showing one card per product. The key is a unique id you give each item so Vue can tell them apart and update the right one when the list changes, preventing mix-ups.”
Code Example
<template>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</template>
<script setup>
import { ref } from 'vue'
const users = ref([
{ id: 1, name: 'Asha' },
{ id: 2, name: 'Beto' },
{ id: 3, name: 'Chen' },
])
</script>Follow-up Questions
- Why is using the array index as a key risky for editable lists?
- How does v-for iterate over an object versus an array?
- What happens internally when Vue's diff finds a matching key?
- Why should you avoid v-if and v-for on the same element?
- Can you use v-for on a <template> tag to loop a group of elements?
MCQ Practice
1. Why does Vue recommend a :key on v-for lists?
Keys let Vue match old and new nodes by identity so it reuses and moves the correct DOM/state instead of patching in place.
2. When is using the array index as :key acceptable?
Index is fine only when the list order never changes; otherwise it mismatches state on insert or reorder.
3. What can v-for iterate over?
v-for supports arrays, object entries, a number range, and characters of a string.
Flash Cards
What does v-for do? — Renders one element per item by iterating an array, object, number, or string.
Why use :key? — It gives each item a stable unique identity so Vue reuses and patches the correct node.
Why is index a bad key for dynamic lists? — Index shifts on insert/reorder, causing Vue to attach state to the wrong item.
What should you avoid with v-for? — Putting v-if on the same element; filter with a computed property instead.