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
Replies (7)
Hi Alexander,
You can try to put in the mounted function in vue.
function mounted () {
KTMenu.createInstances();
}Thanks
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,
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 :
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-->
