Vue Datatable Action Menu
I have integrated the Vue demo customer listing page in my development and when I integrate the Action menu (data-kt-menu) it doesn't work for me in the datatable but I put the same code outside the table it works can you please help me to fix this issue.
Code:
<template v-slot:cell-actions="{ row: data }">
<a
href="#"
class="btn btn-sm btn-light btn-active-light-primary"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end"
>Actions
<span class="svg-icon svg-icon-5 m-0">
<inline-svg src="media/icons/duotune/arrows/arr072.svg" />
</span>
</a>
<!--begin::Menu-->
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
data-kt-menu="true"
>
<!--begin::Menu item-->
<div class="menu-item px-3">
<router-link
to="/apps/customers/customer-details"
class="menu-link px-3"
>View</router-link
>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a class="menu-link px-3"
>Delete</a
>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</template>Screenshot:
Replies (3)
Hello, in order to help some with a practical example of where they should put MenuComponent.reinitialization()
onMounted(() => {
setCurrentPageBreadcrumbs("Usuarios", ["User"]);
onRefresh();
});
const onItemsPerPageChange = async (value: number) => {
itemsPerPage.value = value;
onRefresh();
};
const pageChange = async (value: number) => {
currentPage.value = value;
onRefresh();
};
const onRefresh = async () => {
loading.value = true;
await store.dispatch(Actions.LIST_USER_PERSON, {
limit: itemsPerPage.value,
page: currentPage.value,
});
loading.value = false;
MenuComponent.reinitialization();
};
Hi Lauris, i am using KTDatatable in VueJS and i have same problem. data-kt-menu button doesn't work when used in datatable row.
My code:
{{ toCurrency(cobranca.valor) }}
{{ cobranca.cliente }}
{{ cobranca.situacao }}
{{ cobranca.forma_pagamento }}
Actions {{cobranca.id}}
const listar = () => {
ApiService.post(`/../bff-web/cobranca/list`, {
filter: filter.value
}).then(({data}) => {
list_cobrancas.value = [...data.data[0]];
MenuComponent.reinitialization();
refresh.value +=1;
totalItens.value = data.data[1];
});
}
Hi,
We already know about this issue, and we will include the fix in an upcoming release.
The MenuComponent is initialized when the component is mounted, in table rows might be rendered asynchronously, so you should call the menu reinitialization function manually when the rows in a table have been rendered.
MenuComponent.reinitialization();
