Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(