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

View with compliant examples side by side
<template>
  <div>
    <comp v-for="item in items"> <!-- VUE_MISSING_KEY_ATTRIBUTE alarm -->
      {{ item.name }}
    </comp>
  </div>
</template>

Compliant Code Example

View with noncompliant examples side by side
<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

Was this documentation helpful?