<p>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 : </p> <pre class="lang-html Prettyprint-override"><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></pre> <p>Cette méthode est efficace. Cependant, si j'inclus l'image comme celle-ci, j'obtiens une erreur : </p> <pre class="lang-html Prettyprint-override"><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></pre> <p>Le message d'erreur est le suivant :</p> <pre class="brush:php;toolbar:false;">Erreur 14:3 Les éléments de l'itération s'attendent à avoir des directives 'v-bind:key' vue/require-v-for-key</pre> <p>Je serais heureux si quelqu'un pouvait me donner des conseils. </p>

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