Text typed into one row appears under a different row after insert
← Back to incidents
Vue incident
Draft note jumps to the wrong row after adding at the top
The list updates, but edit state and draft text jump to the wrong row because `v-for` is keyed by index instead of item identity.
Intermediate14 min
Failure signals
The clues you start with
Edit mode sticks to the wrong item after reordering
The list uses `:key="index"`
Overview
What failed in production?
Start by making the bug legible: what the user saw, why it mattered, and what the product was doing underneath.
Symptom
A manager starts editing a note for Maya, then adds a new teammate to the top of the list. The typed draft is now shown under Noah instead, even though Maya was the one being edited.
User impact
Users stop trusting inline editing because the UI makes it look like the wrong person is being changed.
Environment
Vue 3 team-management screen with editable rows. The list can prepend, filter, and sort members, and each row has local edit state and a draft note input.
Evidence pack
What you can inspect before answering
Note
What the user sees
As soon as a new row is inserted at the top, the draft and edit mode appear under a different teammate, even though no save happened.
Log
Render clue
The row component instance is being reused for the new position instead of staying attached to the same logical teammate.
Snippet
Current list rendering
<MemberRow
v-for="(member, index) in members"
:key="index"
:member="member"
/>
<button @click="members.unshift(createMember())">
Add to top
</button>