Vue.js 使用方法<template v-slot>关于道具</template>

Question

感谢您阅读我的问题。 我有一个动态表，我正在尝试在 v-slot 中使用一个道具，如下所示：

      <v-data-table :headers="chooseHeader" :items="chooseItem" :search="search">
        <template v-slot:[`item.iconValue`]>
          <v-icon> mdi-clipboard-edit-outline </v-icon>
        </template>
      </v-data-table>

<script>   
export default {
  name: 'EasyHrPerformanceEvaluationListsNewSolicitation',

  props: {
    iconValue: {
      type: Object,
      required: false,
    },
    chooseHeader: {
      type: Array,
      required: true,
    },
    chooseItem: {
      type: Array,
      required: true,
    },
  },

我调用组件 EasyHrPerformanceEvaluationListsNewSolicitation 来传递道具值：

<EasyHrPerformanceEvaluationListsNewSolicitation
                    :title="$t('Novas Avaliações')"
                    :chooseHeader="selfEvaluationsHeader"
                    :chooseItem="selfEvaluations"
                    :iconValue="makeEvaluation" //v-slot value
                  >
</EasyHrPerformanceEvaluationListsNewSolicitation>

Bellow 是我的页面，如果你看一下，你可以看到“avaliar”列不起作用（我的 v-slot）

在此处输入图像描述

可以在我的 v-slot 中使用下面的 prop 值吗？

iconValue: {
          type: Object,
          required: false,
        },

你能帮助我吗？

Answer 1

我认为从您使用 vuetify 数据表的语法来看。 根据文档，插槽要这样写。

<template v-slot:[`item.iconValue`]="{item}">

参考-> https://vuetifyjs.com/en/components/data-tables/#item