Metronic - User Account Menu Dropdown Not Showing After Redirect

I'm using HTML template project for my Vue JS project, and when the user redirect from login page to dashboard for the first time, the user account menu dropdown is not appear. As a user, i need to refresh my page first so the dropdown will be work.
How do i resolve this issue? any suggestions? Thanks

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 (7)

Hi,

Could you please specify which Metronic version are you using?

Are you able to reproduce this bug on our preview page?
https://preview.keenthemes.com/metronic8/vue/demo1/#/dashboard

Hi,

Metronic 8. Maybe i can refer to this demo https://preview.keenthemes.com/metronic8/laravel/login
However, the issue is once i get redirected from login page to the dashboard, i can't see any dropdown when i clicked the thumbnail for user account menu.

FYI, i'm not using the default template for Vue.js i'm using the plain HTML then remove the JQuery and lastly put it as Vue.js use Inertia.js to combine with Laravel.


Please refer to this images :
https://ibb.co/7QsdFkq

or this is the snippet code :

<!--begin::User account menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-primary fw-bold py-4 fs-6 w-275px" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content d-flex align-items-center px-3">
<!--begin::Avatar-->
<div class="symbol symbol-50px me-5">
<img alt="Logo" src="assets/media/avatars/300-2.jpg" />
</div>
<!--end::Avatar-->

the snippet code :
https://ibb.co/t8LJK2D

Hi Alexander,

Please call for this function to reinitialise the dropdown.

KTMenu.createInstances();

It's a JS function from the HTML version for the dropdown located in this file;
src/js/components/menu.js

Thanks

Hi Faizal,

Still not appear in the first time. i still need to refresh it first.
Any other suggestion perhaps?

Thanks.

I tried to use below script :

document.addEventListener("DOMContentLoaded", function(event) {
KTMenu.createInstances();
alert('loaded!');
});

it's never fired in the first time, need to refreshed first

Hi Alexander,

You can try to put in the mounted function in vue.

function mounted () {
KTMenu.createInstances();
}

Thanks

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  :(