useVueVForKey

HTML

Summary

Rule available since: v2.3.11
Diagnostic Category: lint/nursery/useVueVForKey
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/require-v-for-key

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueVForKey": "error"
6
      }
7
    }
8
  }
9
}

Description

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.

Examples

Invalid

1
<li v-for="item in items">{{ item }}</li>

Valid

1
<li v-for="item in items" :key="item.id">{{ item }}</li>

1
<li v-for="item in items" v-bind:key="item.id">{{ item }}</li>