vue/require-v-for-key

Dlaczego

Without a key, Vue patches list items in place by position. When the list is sorted, filtered or an item is inserted, the DOM nodes and child component state (typed text, open panels, focus) stay where they were and end up next to the wrong data.

Poprawka

Bind a stable, unique value from the item: :key="item.id". On <template v-for>, put the key on the <template> itself (Vue 3), not on its children.

Przykłady

<!-- bad -->
<li v-for="todo in todos">{{ todo.title }}</li>
<!-- good -->
<li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>

Źródła

• Vue docs, List Rendering (maintaining state with key)
• Vue Style Guide, Priority A (use keyed v-for)
• eslint-plugin-vue, require-v-for-key

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain vue/require-v-for-key