Action button not displaying in vuetify v-data-table

Question

everything in the code works fine i mean data is properly fetching from database but the only prlb is the edit and delete icons are not displaying

<template>
  <div class="d-flex flex-column pa-5">
    <div class="d-flex pb-5">
      <h2 class="mr-auto">Category List</h2>
      <NuxtLink to="/admin/cform">
        <v-btn variant="tonal" color="primary"> +Add Category </v-btn>
      </NuxtLink>
    </div>
    <div class="d-flex justify-center">
      <v-data-table
        v-model:items-per-page="itemsPerPage"
        :headers="headers"
        :items="categories"
        class="data-table rounded-lg"
        hover
      >
      <template #item.category="{ item }">
          <strong>{{ item.category }}</strong>
        </template> 

        <template v-slot:item.actions="{item}">
           <v-btn 
            color="primary"
            class="elevation-0"
            icon
            variant="plain"
            @click="editCategory(item)"
           ><v-icon> mdi-pencil-outline</v-icon>
           </v-btn>
           <v-btn
                color="error"
                variant="plain"
                class="elevation-0"
                icon
                @click="deleteCategory(item)"
                ><v-icon>mdi-trash-can-outline</v-icon
              ></v-btn>

      </template>
      </v-data-table>
    </div>
  </div>
</template>

Can someone tell me what m i missing or doing wrong in here because then i have to add proper functionality to it

<script>
export default {
  data() {
    return {
      itemsPerPage: 5,
        categories: [],
        //actions:"",

        headers: [
         { title: "Category ID", value: "CategoryId" },
        { title: "Category", value: "Category" },
        { title: "Actions", value: "Actions", sortable: false },
      ],
    };
  },

score 0 · Accepted Answer · answered Jul 05 '23 at 17:53

It says you are using Vue 3 in the tags, which means you are using Vuetify 3. In the current version of VDataTable, use key instead of value in the header declaration:

headers: [
  { title: "Category ID", key: "CategoryId" },
  { title: "Category", key: "Category" },
  { title: "Actions", key: "Actions", sortable: false },
],

Also, the #item.<column name> slot name has to match the key, which would make it #item.Category (upper-cased "category"), not #item.category. And the item in the slot props is the internal table item, not the entry from the array you passed in. But it can be accessed through the raw property. So the slot should be:

<template #item.Category="{ item }">
  <strong>{{ item.raw.category }}</strong>
</template>

With these changes, your table renders in the playground

@Mortiz Ringler thanks for ur help – Shree Jul 06 '23 at 04:24 — Shree, Jul 06 '23 at 04:24

Action button not displaying in vuetify v-data-table

1 Answers1