"Comment insérer des images dans l'en-tête du tableau dans vue.js 3"

Question

J'utilise v-data-table de vue.js 3 et je souhaite insérer une image dans l'en-tête du tableau. J'ai donc essayé de remplacer le modèle d'en-tête du tableau :

<code><template v-for="en-tête dans les en-têtes" v-slot :[`header.${header.value}`]=" ;{ en-têtes }">

     {{ en-tête }}

</modèle>
</code>

Cette méthode est efficace. Cependant, si j'inclus l'image comme celle-ci, j'obtiens une erreur :

<code><template v-for="en-tête dans les en-têtes" v-slot :[`header.${header.value}`]=" ;{ en-têtes }">
    {{ en-tête }}
    <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> ;
</modèle>
</code>

Le message d'erreur est le suivant :

Erreur 14:3 Les éléments de l'itération s'attendent à avoir des directives 'v-bind:key' vue/require-v-for-key

Je serais heureux si quelqu'un pouvait me donner des conseils.

Answer 1

Essayez de saisir un élément imbriqué basé sur l'index du titre actuel :

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