Suggest an editImprove this articleRefine the answer for “What happens if you use v-for without a key?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)Using **`v-for` without a `key`** is a common mistake: Vue cannot correctly match list items, so instead of creating/removing the right DOM nodes it updates existing ones "in place". **Key point:** this leads to incorrect DOM updates, mixed-up input field values, incorrect component behavior in lists, and broken transition-group animations.Shown above the full answer for quick recall.Answer (EN)ImageUsing `v-for` **without** a `key` is a common mistake that leads to unpredictable interface behavior. Vue lets you skip the key, but doing so is **suboptimal and potentially dangerous**. Here is what actually happens. --- ## The main point: Vue will use an *in-place patching* strategy Without a `key`, Vue **cannot correctly match list items**, so it will: #### **update existing DOM elements "in place"**, replacing their content instead of creating/removing the right elements. --- ## What does this lead to? ### 1. **Incorrect DOM updates** Vue will think the old element equals the new element, and will just update its text, but leave: - focus state - internal components - transition effects - local state of child components This can cause very strange bugs. --- ### 2. **DOM shuffling** Example: ```html <li v-for="item in items"> <input v-model="item.value"> </li> ``` If `items` is reordered: - input field values stay with the **old** DOM elements - while the text updates to the new data The result -> a mismatch between data and UI. --- ### 3. Loss of correct component behavior in lists If you render components: ```html <UserCard v-for="user in users" :user="user" /> ``` and do not specify `key`, Vue will: - reuse **the wrong** component - leave the old props on the new component - not call the correct lifecycle hooks --- ### 4. List animations (transition-group) will not work Without keys, Vue cannot track: - which elements were added - which were removed - which were moved And the animation will "break". --- ## An example where everything breaks ```html <div id="app"> <div v-for="n in numbers"> <input v-model="n.value"> </div> </div> ``` If the elements are reordered: ```js this.numbers.reverse(); ``` The text the user typed gets mixed up. --- ## Why is a key needed? A `key` is a **unique identifier** that helps Vue understand: - which element was **just added** - which was removed - which was simply changed In other words, `key` is the DOM element's "passport".For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.