# vue/no-v-for-template-key-on-child
disallow key of
<template v-for>
placed on child elements
- ⚙️ This rule is included in all of
"plugin:vue/vue3-essential"
,"plugin:vue/vue3-strongly-recommended"
and"plugin:vue/vue3-recommended"
.
# 📖 Rule Details
This rule reports the key of the <template v-for>
placed on the child elements.
In Vue.js 3.x, with the support for fragments, the <template v-for>
key can be placed on the <template>
tag.
See Migration Guide - key
attribute > With <template v-for>
(opens new window) for more details.
Note
Do not use with the vue/no-v-for-template-key rule for Vue.js 2.x.
This rule conflicts with the vue/no-v-for-template-key rule.
<template>
<!-- ✓ GOOD -->
<template v-for="todo in todos" :key="todo">
<Foo />
</template>
<!-- ✗ BAD -->
<template v-for="todo in todos">
<Foo :key="todo" />
</template>
</template>
# 🔧 Options
Nothing.
# 👫 Related Rules
# 📚 Further Reading
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0