Vue.js How to use <template v-slot> on Props

Question

thanks for reading my question. I've a dynamic table and I'm trying to use a prop in v-slot, like bellow:

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

I call the component EasyHrPerformanceEvaluationListsNewSolicitation to pass the prop values:

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

Bellow is my page, if you have a look you can se the column "avaliar" isn't working (my v-slot)

enter image description here

Is possible to use the prop value bellow in my v-slot?

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

Can you help me?

Answer 1

I think from the syntax you are using vuetify data table. And as per the doc's, slots are to be written like this.

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

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