Hi! Im using the Demo 1 version of the metronic template, i chose the Vue option.
I am having a little trouble trying to render a drop down menu in my screen.
There is this template section with a v-slot (Actions) inside a datatable:
<template v-slot:actions="{ row: customer }">
<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
<KTIcon icon-name="down" icon-class="fs-5 m-0" />
</a>
<!--begin::Menu-->
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semobold 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 @click="deleteCustomer(customer.id)" class="menu-link px-3"
>Delete</a
>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</template>
HI,
Thank you for reaching out to us.
Please note that our ts components are initialized when the component is mounted. You can find an initialization example in the file src/core/plugins/keenthemes.ts. When fetching data from the server, rows are rendered asynchronously. To resolve menu issues, call the menu reinitialization function again once your data is received and the table rows are rendered.
MenuComponent.reinitialization();