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

<template>
  <MyComponent v-for="item in items"> <!-- VUE_MISSING_KEY_ATTRIBUTE alarm -->
    {{ item.name }}
  </MyComponent>
</template>

Compliant Code Example

<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.

See

• Built-in Special Attributes: key

• Maintaining State with key