"vue.js 3의 테이블 헤더에 그림을 삽입하는 방법"

Question

vue.js 3의 v-data-table을 사용하고 있으며 테이블 헤더에 그림을 삽입하고 싶습니다. 그래서 표 헤더 템플릿을 재정의해 보았습니다.

<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

가 있어야 합니다.

누구라도 조언을 해주시면 기쁘겠습니다.

Answer 1

현재 제목의 색인을 기반으로 중첩된 요소를 입력해 보세요.

으아악