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 },
],
};
},
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 ofvalue
in the header declaration:Also, the
#item.<column name>
slot name has to match thekey
, which would make it#item.Category
(upper-cased "category"), not#item.category
. And theitem
in the slot props is the internal table item, not the entry from the array you passed in. But it can be accessed through theraw
property. So the slot should be:With these changes, your table renders in the playground