„So fügen Sie Bilder in den Tabellenkopf in vue.js 3 ein“

Question

Ich verwende v-data-table aus vue.js 3 und möchte ein Bild in den Tabellenkopf einfügen. Also habe ich versucht, die Tabellenkopfvorlage zu überschreiben:

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

     {{ Überschrift }}

</template>
</code>

Diese Methode ist effektiv. Wenn ich das Bild jedoch so einfüge, erhalte ich eine Fehlermeldung:

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

Die Fehlermeldung lautet wie folgt:

14:3 error Elemente in der Iteration erwarten, dass sie „v-bind:key“-Anweisungen haben vue/require-v-for-key

Ich würde mich freuen, wenn mir jemand einen Rat geben könnte.

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>