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.
