<p>vue.js 3 の v-data-table を使用しており、テーブル ヘッダーに画像を挿入したいと考えています。 そこで、テーブルヘッダーテンプレートをオーバーライドしてみました: </p> <pre class="lang-html prettyprint-override"><code><template v-for="ヘッダー内のヘッダー" v-slot:[`header.${header.value}`]=" ;{ ヘッダー }"> {{ ヘッダーテキスト }} </テンプレート> </code></pre> <p>この方法は効果的です。ただし、次のように画像を含めると、エラーが発生します: </p> <pre class="lang-html prettyprint-override"><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></pre> <p>エラーメッセージは次のとおりです。</p> <pre class="brush:php;toolbar:false;">14:3 エラー 反復内の要素には 'v-bind:key' ディレクティブが必要です vue/require-v-for-key</pre> <p>どなたかアドバイスをいただければ幸いです。 </p>