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 (3)
Hey everyone, just need to relax and everything will fall into place. I unwind by playing online games, and it's super convenient to do it through a mobile app. I recently tried the pin-up bet app and it's a game changer! The app lets you access all the casino's features directly from your phone, whether it's slots, table games, or live dealer experiences. You can easily deposit, withdraw, and claim bonuses, all while enjoying a smooth, secure gaming experience anytime and anywhere. Definitely worth checking out if you enjoy playing on the go!
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
