vue.js 3 在表头中插入图像答案

【问题标题】：vue.js 3 insert images in table headervue.js 3 在表头中插入图像
【发布时间】：2021-07-02 22:30:28
【问题描述】：

我正在使用 vue.js 3 v-data-table 并希望在表头中插入图像。因此我试图覆盖表头模板：

<template v-for="header in headers" v-slot:[`header.${header.value}`]="{ headers }">        

     {{ header.text }}

</template>

这行得通。但是，如果我包含这样的图片，则会出现错误：

<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>

错误是：

14:3  error  Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key

如果有人可以提供建议，我会很高兴。

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

尝试根据当前标头的索引对嵌套元素进行键控：

<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>

【讨论】：

【解决方案2】：

vue/require-v-for-key docs 显示了如何解决该问题的示例：

<template>
  <!-- ✓ GOOD -->
  <div
    v-for="todo in todos"
    :key="todo.id"
  />
  <!-- ✗ BAD -->
  <div v-for="todo in todos"/>
</template>

v-for 中的每个元素都需要一个唯一的key attribute 才能正确呈现，尤其是在元素顺序可以更改的情况下。

在您的情况下，您可以在<template> 上使用header.value 作为key：

<template v-for="header in headers"
          v-slot:[`header.${header.value}`]="{ headers }"
         :key="header.value">
           ?

header.value 在此处假定是唯一的，正如v-slot 所要求的那样。否则，您会看到不同的 lint 错误 (vue/valid-v-slot)。

【讨论】：