<p>vue.js 3의 v-data-table을 사용하고 있으며 테이블 헤더에 그림을 삽입하고 싶습니다. 그래서 표 헤더 템플릿을 재정의해 보았습니다. </p> <pre class="lang-html Prettyprint-override"><code><template v-for="헤더의 헤더" v-slot:[`header.${header.value}`]=" ;{ 헤더 }"> {{ 헤더.텍스트 }} </템플릿> <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> ; </템플릿> <p>오류 메시지는 다음과 같습니다.</p> <pre class="brush:php;toolbar:false;">14:3 오류 반복의 요소에는 'v-bind:key' 지시어 vue/require-v-for-key</pre>가 있어야 합니다. <p>누구라도 조언을 해주시면 기쁘겠습니다. </p>