src/content/docs/linter/rules/use-vue-v-for-key.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="HTML" icon="seti:html"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.11` - Diagnostic Category: [`lint/nursery/useVueVForKey`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Same as [`vue/require-v-for-key`](https://eslint.vuejs.org/rules/require-v-for-key){
"linter": {
"rules": {
"nursery": {
"useVueVForKey": "error"
}
}
}
}
Enforce that elements using v-for also specify a unique key.
When rendering lists with v-for, Vue relies on a key to track elements efficiently.
The key can be provided via longhand v-bind:key or shorthand :key. If you need to
animate the entrance/exit of an item in a list, the key should be a unique identifier for
each item in the list, and not the index of the item.
For more information, see the Vue documentation on list rendering.
<li v-for="item in items">{{ item }}</li>
<li v-for="item in items" :key="item.id">{{ item }}</li>
<li v-for="item in items" v-bind:key="item.id">{{ item }}</li>