JS.VUE.NO.TEMPLATE.KEY

Disallow 'key' attribute on '<template>'

Vue.js disallows key attribute on <template> elements.

Rule Details

This rule reports the <template> elements which have key attribute.

{'vue/no-template-key': ['error']}

Copy
<template>
  <!-- GOOD -->
  <div key="foo"> ... </div>
  <template> ... </template>

  <!-- It's valid for Vue.js 3.x -->
  <template v-for="item in list" :key="item.id"> ... </template>

  <!-- BAD -->
  <template key="foo"> ... </template>
  <template v-bind:key="bar"> ... </template>
  <template :key="baz"> ... </template>
</template>

This rule does not report keys placed on <template v-for>. It's valid for Vue.js 3.x. If you want to report keys placed on <template v-for> invalid for Vue.js 2.x, use no-v-for-template-key rule.

Options

Nothing.

Further Reading

  • API - Special Attributes - key (https://v3.vuejs.org/api/special-attributes.html#key)

The content on this page is adapted from the ESLint User Guide. Copyright © OpenJS Foundation and other contributors, www.openjsf.org. All rights reserved. https://eslint.org/docs/rules/