"How to insert pictures into the table header in vue.js 3"
P粉550257856
P粉550257856 2023-08-27 08:59:21
0
1
531
<p>I am using v-data-table from vue.js 3 and want to insert a picture in the table header. So I tried overriding the table header template: </p> <pre class="lang-html prettyprint-override"><code><template v-for="header in headers" v-slot:[`header.${header.value}`]=" ;{ headers }"> {{ header.text }} </template> </code></pre> <p>This method is effective. However, if I include the image like this, I get an error: </p> <pre class="lang-html prettyprint-override"><code><template v-for="header in headers" v-slot:[`header.${header.value}`]=" ;{ headers }"> {{ header.text }} <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> ; </template> </code></pre> <p>The error message is as follows:</p> <pre class="brush:php;toolbar:false;">14:3 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key</pre> <p>I would be happy if anyone could offer advice. </p>
P粉550257856
P粉550257856

reply all(1)
P粉127901279

Attempt to type a nested element based on the index of the current heading:

<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>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template