Why is this an issue?

The v-for directive requires a binding expression in alias in list format. A missing expression is a compiler-level mistake: Vue emits a warning and the element renders once without looping. An unexpected argument or modifier is not detected by Vue at all and the loop still renders normally, making it a silent typo that only a linter can catch.

Beyond syntax, v-for on a custom component (or a native element rendered as one via the is attribute) requires a :key attribute so Vue can track component identity across list updates. Without it, Vue incorrectly reuses component state when items are reordered or removed. In addition, whenever :key is used with v-for on any element, it must reference at least one of the variables declared in the v-for expression. Using an unrelated variable as the key has the same effect, since the key no longer uniquely identifies each item within the list. Native HTML elements missing :key entirely are not covered by this rule.

To fix structural issues, write the v-for expression in the correct alias in list format. For custom components, add a :key attribute. Whenever :key is used with v-for, make sure it references one of the loop variables.

Code examples

Noncompliant code example

<template>
  <div v-for></div> <!-- Noncompliant: missing expression -->
</template>

Compliant solution

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

Noncompliant code example

<template>
  <div v-for:aaa="item in items" :key="item.id">{{ item.name }}</div> <!-- Noncompliant: unexpected argument -->
</template>

Compliant solution

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

Noncompliant code example

<template>
  <div v-for.bbb="item in items" :key="item.id">{{ item.name }}</div> <!-- Noncompliant: unexpected modifier -->
</template>

Compliant solution

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

Noncompliant code example

<template>
  <my-comp v-for="item in items">{{ item.name }}</my-comp> <!-- Noncompliant: custom component missing :key -->
</template>

Compliant solution

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

Noncompliant code example

<template>
  <div v-for="item in items" :key="other.id">{{ item.name }}</div> <!-- Noncompliant: :key does not reference a v-for variable -->
</template>

Compliant solution

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

Noncompliant code example

<template>
  <div v-for="todo in todos" is="MyComponent" /> <!-- Noncompliant: element rendered as component via "is" missing :key -->
</template>

Compliant solution

<template>
  <div v-for="todo in todos" is="MyComponent" :key="todo.id" />
</template>

Resources

Documentation