JS.VUE.NO.V.FOR.TEMPLATE.KEY.ON.CHILD

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> (https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for) for more details.

This rule is targeted at Vue.js 3.x. If you are using Vue.js 2.x, enable the no-v-for-template-key rule instead. Don't enable both rules together; they are conflicting.

{'vue/no-v-for-template-key-on-child': ['error']}

<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.

Further Reading

• Migration Guide - key attribute > With <template v-for> (https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for)