In Vue, when rendering a list with v-for, each native HTML element must have a :key attribute with a unique, stable
value. Without a key, Vue falls back to an in-place patch strategy: it reuses DOM nodes by position rather than by identity. This can cause subtle
rendering bugs when items are reordered, inserted, or removed, break CSS transitions and animations, and let component state leak between items that
occupy the same position in the list.
Adding a :key attribute lets Vue efficiently identify which DOM nodes need to be updated, moved, or replaced, resulting in correct and
predictable rendering.
This rule only checks native HTML elements; custom components are out of scope.
To fix the issue, add a :key attribute with a unique, stable value (typically the item’s ID) to each native HTML element that has a
v-for directive.
<template>
<ul>
<li v-for="todo in todos">{{ todo.text }}</li> <!-- Noncompliant: missing :key attribute -->
</ul>
</template>
<template>
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
</template>