vue.js - 将图像动态插入“v-data-table”

Question

<v-data-table
  :headers="headers"
  :items="items"
  :search="search"
  hide-default-footer
  class="elevation-1"
>
  <template #[`item.employee_avatar`]="{ item }">
    <v-img
      :src="require('@/assets/img/img2.jpg')"
      :alt="item.name"
      style="width: 100px; height: 100px"
    />
  </template>
</v-data-table>

接收到具有固定路径的图像，但我想用每个对象的图像路径来表达图像。我想自动跟随的imgsrc路径值items。

export default {
  data() {
    return {
      search: '',
      loading: true,
      headers: [
        {
          text: 'Avatar',
          value: 'employee_avatar',
          divider: true,
          align: 'center',
          sortable: false,
          width: '100px',
        },
        {
          text: 'myname',
          align: 'center',
          sortable: false,
          value: 'name',
        },
      ],
      items: [
        {
          name: 'myname',
          imgsrc: "@/assets/avatar.png",
        },

下面的代码是我试过的代码。

<template #[`item.employee_avatar`]="{ item }">
  <v-img
    :src="require(item.imgsrc)"
    :alt="item.name"
    style="width: 100px; height: 100px"
  />
</template>

即使我填写上述内容也会有错误。

它出什么问题了？帮我...

Answer 1

您可以使用v-slot代替#[item.employee_avatar]：

<template v-slot:item.employee_avatar="{ item }">
  <v-img
    :src="require(item.imgsrc)"
    :alt="item.name"
    style="width: 100px; height: 100px"
  />
</template>