noVueVForTemplateKeyOnChild (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueVForTemplateKeyOnChild
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-v-for-template-key-on-child

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueVForTemplateKeyOnChild": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow placing the key of a <template v-for> on its child elements.

When a <template> tag repeats its content with v-for, Vue expects the key on the <template> tag itself. A key on a child element that uses the loop variables belongs on the <template> tag instead.

Child elements that have their own v-if, v-else-if, v-else, or v-for are not reported, and neither are keys that don’t use any variable from the <template>’s v-for.

Examples

Invalid

1
<template>
2
  <template v-for="todo in todos">
3
    <TodoItem :key="todo.id" />
4
  </template>
5
</template>

Valid

1
<template>
2
  <template v-for="todo in todos" :key="todo.id">
3
    <TodoItem />
4
  </template>
5
  <template v-for="todo in todos" :key="todo.id">
6
    <TodoItem v-if="todo.visible" :key="todo.id" />
7
  </template>
8
</template>