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 rendering v-for, Vue uses the key attribute to track the identity of iterated elements.

If a static key attribute is used, elements share the same value for the key attribute. This may cause an update error and Vue outputs a warning message.

Noncompliant Code Example

<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

<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

• Built-in Special Attributes: key

• Maintaining State with key

• [Vue warn]: Duplicate keys found during update: "p.id". Make sure keys are unique.