How to get rid of ESLint error <template v-for> key should be placed on the <template> tag?
Full error message
I am using NuxtJS with Vuetify in an app. When showing a table of records with v-data-table, I want to show a badge if the item.isActive is true. For that, I am looping over <template> inside <tr>. Whenever I am providing key to the <template> tag I am getting '<template v-for>' cannot be keyed. Place the key on real elements instead. When I am trying to key the <td>, I am getting <template v-for> key should be placed on the <template> tag. This is faced in VSCode with ESLint
1st Error
2nd Error
Implementation:
<v-data-table :items="items">
<template v-slot:item="{ item }">
<tr>
<template v-for="(header, index) in headers">
<td v-if="header.value === 'isActive'" :key="index">
<v-badge bordered content="" offset-x="-10" color="'#64b54d'" />
</td>
<td
v-else
:key="index"
>
{{ item[header.value] }}
</td>
</template>
</tr>
</template>
</v-data-table>
CodeSandbox link: https://codesandbox.io/s/runtime-wood-q4mc5h?file=/pages/home.vue:11-585
Thanks in Advance.Solutionsource: stackoverflow \u2197
I've had similar situations and for me, this is what it boils down to (although the error does not say that specifically): There is no reason to use a <template> tag in that situation. Putting v-for on the child inside the <template> would give you the exact same output. Here are some screenshots to clarify: Here we have an error. Adding a v-if on the child could for example be a reason for using <template> (v-if should not be used on the same element as v-for). Now the error is gone. Or we simply loop the element inside the <template> tag and the error goes away.
API access
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/5919c3a0282620057a6dd36cfce7ce9a605cb0056644c0ca8d4334bfb411f6b7hash \u00b7 5919c3a0282620057a6dd36cfce7ce9a605cb0056644c0ca8d4334bfb411f6b7