no-v-for-template-key-on-child.md

Pattern: Use of key of <template v-for> placed on child elements

Issue: -

Description

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.

<template>
  <!-- ✓ GOOD -->
  <template v-for="todo in todos" :key="todo">
    <Foo />
  </template>

  <!-- ✗ BAD -->
  <template v-for="todo in todos">
    <Foo :key="todo" />
  </template>
</template>

Further Reading

• eslint-plugin-vue - no-v-for-template-key-on-child
• Migration Guide - key attribute > With <template v-for>