vue/no-index-key

Dlaczego

: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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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