Element iterated with v-for should not have a static key attribute

  • VUE_STATIC_KEY_ATTRIBUTE
  • Error
  • Medium
  • vue

This rule applies when an element iterated with v-for directive has a static key attribute without v-bind.

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

When a static key attribute is used, elements can share the same key attribute value. Since this may cause an update error, Vue outputs a warning message.

Noncompliant Code Example

View with compliant examples side by side
<template>
  <ul>
    <li v-for="p in persons" key="p.id"> <!-- VUE_STATIC_KEY_ATTRIBUTE alarm -->
      {{ p.id }}: {{ p.name }} <input type="text">
    </li>
  </ul>
</template>

Compliant Code Example

View with noncompliant examples side by side
<template>
  <ul>
    <li v-for="p in persons" v-bind:key="p.id">
      {{ p.id }}: {{ p.name }} <input type="text">
    </li>
  </ul>
</template>

Version

This rule was introduced in DeepScan 1.15.0-beta.

See

Was this documentation helpful?