vue/no-index-key

Why

:key="index" is the same as no key for a list that changes: after a removal or a sort, index 2 now belongs to another item, so Vue reuses the old DOM and component state for the wrong row. Inputs keep the text of the removed item and transitions animate the wrong element.

Fix

Use an id from the data (:key="item.id"). If the data has none, add ids when you create or load the items (crypto.randomUUID()), not in the template. The index is acceptable only for a static list that never reorders and holds no state.

Examples

<!-- bad -->
<CartRow v-for="(line, i) in lines" :key="i" :line="line" />
<!-- good -->
<CartRow v-for="line in lines" :key="line.sku" :line="line" />

Sources

• Vue docs, List Rendering (maintaining state with key)
• Vue API, the special attribute key

Read it in the terminal

npx github:dawidolko/frontend-skills explain vue/no-index-key