我在一个应用中使用NuxtJS和Vuetify。在使用v-data-table
显示一张记录表格时,如果item.isActive
为true,我希望显示一个徽章。为此,我正在<tr>
内部循环遍历<template>
。但是,每当我为<template>
标签提供键时,我会得到'<template v-for>' cannot be keyed. Place the key on real elements instead
的错误提示。当我尝试为<td>
设置键时,我会得到<template v-for> key should be placed on the <template> tag.
的错误提示。这种情况发生在VSCode中的ESLint。
第一个错误:
第二个错误:
实现:
<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链接:https://codesandbox.io/s/runtime-wood-q4mc5h?file=/pages/home.vue:11-585
提前致谢。
template
标签吗?为什么不把v-for放在你的<tr>
上? - miro