"在vue.js 3中如何在表頭中插入圖片"

Question

我正在使用vue.js 3的v-data-table，並且想在表頭中插入圖片。 因此，我嘗試覆蓋表頭模板：

<code><template v-for="header in headers" v-slot:[`header.${header.value}`]=" ;{ headers }">

     {{ header.text }}

</template>
</code>

這個方法是有效的。然而，如果我像這樣包含圖片，就會出現錯誤：

<code><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>
</code>

錯誤訊息如下：

14:3 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key

如果有人能提供建議，我會很高興。

Answer 1

嘗試根據目前標題的索引鍵入巢狀元素：

<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>