key List Identity Key
Last updated: 2026-10-22
key List Identity Key
key identifies list items for v-for, letting Vue reuse or rebuild nodes correctly when lists change.
| Group | Built-ins |
|---|---|
| Kind | Special Attribute |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<li v-for="item in items" :key="item.id">{{ item.name }}</li>⚙️ Arguments
| props | A unique, stable value (use an id, not the index) |
|---|
▶ Example
Edit the code below and see the live result:
Output：
Reversing reorders rows without dragging state into the wrong row.💡 Key Points
⚠️ Warning Index keys are a classic bug: state hops rows after insert or delete.
ℹ️ Note keys also force re-creation when the value changes.
💡 Tip Prefer stable ids, then unique business fields, index last.
🏷️ Related Built-ins
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What if key is omitted?
A Vue falls back to in-place patching with a warning — bugs appear on reorder.
Q Must keys be globally unique?
A Unique within the list is enough.
Q Can key force a re-render?
A Yes — bind a changing value to re-create it.
