「vue.js 3 のテーブルヘッダーに画像を挿入する方法」

Question

vue.js 3 の v-data-table を使用しており、テーブル ヘッダーに画像を挿入したいと考えています。 そこで、テーブルヘッダーテンプレートをオーバーライドしてみました:

<code><template v-for="ヘッダー内のヘッダー" v-slot:[`header.${header.value}`]=" ;{ ヘッダー }">

     {{ ヘッダーテキスト }}

</テンプレート>
</code>

この方法は効果的です。ただし、次のように画像を含めると、エラーが発生します:

<code><template v-for="ヘッダー内のヘッダー" v-slot:[`header.${header.value}`]=" ;{ ヘッダー }">
    {{ ヘッダーテキスト }}
    <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> ;
</テンプレート>
</code>

エラーメッセージは次のとおりです。

14:3 エラー 反復内の要素には 'v-bind:key' ディレクティブが必要です vue/require-v-for-key

どなたかアドバイスをいただければ幸いです。

Answer 1

現在の見出しのインデックスに基づいて、ネストされた要素を入力してみます:

リーリー