我正在使用vue.js 3的v-data-table，并且想在表头中插入图片。 因此，我尝试覆盖表头模板：
1
1259<template v-for="header in headers" v-slot:[`header.${header.value}`]="{ headers }">
{{ header.text }}
</template>
这个方法是有效的。然而，如果我像这样包含图片，就会出现错误：
<template v-for="header in headers" v-slot:[`header.${header.value}`]="{ headers }">
{{ header.text }}
<span v-if="header.text=='SomeText'"><img :src="require('@/assets/image_1.png')" /></span>
<span v-if="header.text=='SomeOtherText'"><img :src="require('@/assets/image_2.png')" /></span>
</template>
错误信息如下：
14:3 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key
如果有人能提供建议，我会很高兴。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
尝试根据当前标题的索引键入嵌套元素：
<template v-for="(header,i) in headers" v-slot:[`header.${header.value}`]="{ headers }"> <span :key="'text'+i"> {{ header.text }}</span> <span :key="'img1'+i" v-if="header.text=='SomeText'"><img :src="require('@/assets/image_1.png')" /></span> <span :key="'img2'+i" v-if="header.text=='SomeOtherText'"><img :src="require('@/assets/image_2.png')" /></span> </template>