vue/require-v-for-key

Why

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.

Fix

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.

Examples

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

Sources

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

Read it in the terminal

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