Vue component iterated with v-for
should have a key
attribute
- VUE_MISSING_KEY_ATTRIBUTE
- Code Quality
- Low
- vue
This rule applies when a Vue component iterated with v-for
directive does not have a key
attribute.
Vue uses the key
attribute to track the identity of components when the iterated items are reordered. If no key
is provided, the default "in-place patch" strategy is used, which does not maintain the component states.
Therefore, to ensure correct states after the reordering, it is recommended to always use the key
attribute when iterating Vue components.
Noncompliant Code Example
View with compliant examples side by side<template>
<MyComponent v-for="item in items"> <!-- VUE_MISSING_KEY_ATTRIBUTE alarm -->
{{ item.name }}
</MyComponent>
</template>
Compliant Code Example
View with noncompliant examples side by side<template>
<MyComponent v-for="item in items" :key="item.id">
{{ item.name }}
</MyComponent>
</template>
Version
This rule was introduced in DeepScan 1.15.0-beta.