The Vue component iterated with v-for should have a v-bind:key attribute

• VUE_MISSING_KEY_ATTRIBUTE
• Code Quality
• Low
• vue

This rule applies when the Vue component iterated with v-for directive does not have a dynamically bound key attribute.

When Vue is updating elements rendered with v-for directive, it applies optimization using their key attributes.

If updated elements do not have key attributes, Vue cannot reuse existing elements and applies a default in-place patch strategy. In this case, Vue outputs a warning message.

Noncompliant Code Example

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

Compliant Code Example

<template>
  <div>
    <comp v-for="item in items" v-bind:key="item.id">
      {{ item.name }}
    </comp>
  </div>
</template>

Version

This rule was introduced in DeepScan 1.15.0-beta.

See

• Vue list rendering about key

• [Vue warn]: <comp v-for="item in items" />: component lists rendered with v-for should have explicit keys