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

<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

• Vue list rendering about key

• [Vue warn]: Duplicate keys detected: 'p.id'. This may cause an update error.