"Cara untuk memasukkan gambar ke dalam pengepala jadual dalam vue.js 3"

Question

Saya menggunakan v-data-table daripada vue.js 3 dan mahu memasukkan gambar dalam pengepala jadual. Jadi saya cuba mengatasi templat pengepala jadual:

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

     {{ header.text }}

</template>
</code>

Kaedah ini berkesan. Walau bagaimanapun, jika saya memasukkan imej seperti ini, saya mendapat ralat:

<code><template v-for="header in headers" v-slot:[`header.${header.value}`]=" ;{ pengepala }">
    {{ header.text }}
    <span v-if="header.text=='SomeTeks'"><img :src="require('@/assets/image_1.png')" /></span> ;
    <span v-if="header.text=='SomeOtherTeks'"><img :src="require('@/assets/image_2.png')" /></span> ;
</template>
</code>

Mesej ralat adalah seperti berikut:

14:3 ralat Elemen dalam lelaran dijangka mempunyai arahan 'v-bind:key' vue/require-v-for-key

Saya amat berbesar hati jika sesiapa boleh memberikan nasihat.

Answer 1

Cuba taip elemen bersarang berdasarkan indeks tajuk semasa:

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