{"id":543,"hash":"5919c3a0282620057a6dd36cfce7ce9a605cb0056644c0ca8d4334bfb411f6b7","pattern":"How to get rid of ESLint error &lt;template v-for&gt; key should be placed on the &lt;template&gt; tag?","full_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\n\n1st Error\n\n2nd Error\n\nImplementation:\n\n  <v-data-table :items=\"items\">\n    <template v-slot:item=\"{ item }\">\n      <tr>\n        <template v-for=\"(header, index) in headers\">\n          <td v-if=\"header.value === 'isActive'\" :key=\"index\">\n            <v-badge bordered content=\"\" offset-x=\"-10\" color=\"'#64b54d'\" />\n          </td>\n          <td\n            v-else\n            :key=\"index\"\n          >\n            {{ item[header.value] }}\n          </td>\n        </template>\n      </tr>\n    </template>\n  </v-data-table>\n\nCodeSandbox link: https://codesandbox.io/s/runtime-wood-q4mc5h?file=/pages/home.vue:11-585\n\nThanks in Advance.","ecosystem":"npm","package_name":"vue.js","package_version":null,"solution":"I've had similar situations and for me, this is what it boils down to (although the error does not say that specifically):\n\nThere 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.\n\nHere are some screenshots to clarify:\n\nHere we have an error.\n\nAdding 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.\n\nOr we simply loop the element inside the <template> tag and the error goes away.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/71290457/how-to-get-rid-of-eslint-error-template-v-for-key-should-be-placed-on-the-tem","votes":29,"created_at":"2026-04-19T04:51:19.429538+00:00","updated_at":"2026-04-19T04:51:19.429538+00:00"}