Problem rendering dropdown menu
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>When i click on it, the menu does not drop down and i get redirected to the home page, because of the href attribute. If i comment the href or place a click.prevent, the menu doesn't drop down, and nothing happens.
Note: there are no javascript errors being logged on the console, or anything like that.
What could be the problem? Or at least how could i log relevant information to debug it?
Replies (2)
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();Please let us know if you will need any further help with this task or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
