Issue on loading kt-menu Vue.js
Saw the previous tickets and did the following:
1. Added the menu in a div element
2. Imported MenuComponent.reinitialization() from "@/assets/ts/components";
3. Also added MenuComponent.reinitialization() in the onMounted async function
I'm close to solving it, but there's still an issue. When I change the data-kt-menu-trigger from hover to click or vice-versa and save the changes, they start working on the page, but when I reload the page again it stops working.
Any ideas please? It's blocking me from testing some stuff
Replies (16)
Hi,
Could you please attach code of your menu element?
Also, please let me know your Metronic version.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
<template v-slot:Actions="{ row: triggerVal }">
<div>
<a
class="btn btn-sm btn-light btn-active-light-primary"
data-kt-menu-trigger="hover"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end"
>Actions
<span class="svg-icon svg-icon-5 m-0">
<inline-svg
:src="getAssetPath("/media/icons/duotune/arrows/arr072.svg")"
/>
</span>
</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">
<a href="" data-bs-toggle="modal" v-on:click="setData(triggerVal)" class="menu-link px-3"
>View</a
>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a @click="deleteTrigger(triggerVal.Id)" class="menu-link px-3"
>Delete</a
>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</div>
</template>Metronic version: 8.1.6
Hi,
Your HTML code looks fine, you need to do MenuComponent reinitialization when data is received.
Could you please attach your onMountedcode as well?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Here's the onMounted code:
onMounted(async () => {
MenuComponent.reinitialization()
// Retrieve list of triggers
const res = await TriggerDataService.getAll()
tableData.value = res.Data
initTriggers.value.splice(0, res.Data.length, ...res.Data);
});Found another issue, that I think might be from the same cause, but can't seem to see what it is.
When sending prop data to a child component and trying to assign the values to a local property it's not applying the data to it.
Script example:
export default {
name: "kt-activity-drawer",
props: {
data: {
type: Trigger,
default: () => ({
})
}
},
data() {
return {
localProp: this.data,
getAssetPath,
}
},
setup(){
},
};Not sure if this might be an issue in the new version, because this wasn't happening in the previous one.
Thanks for the help!
Hi,
To fix menu in your table try to move the initialization code under your request.
onMounted(async () => {
// Retrieve list of triggers
const res = await TriggerDataService.getAll()
tableData.value = res.Data
initTriggers.value.splice(0, res.Data.length, ...res.Data);
MenuComponent.reinitialization()
});Regards,
Lauris Stepanovs,
Keenthemes Support Team
Seems like it has the exact same issue/outcome
Hi,
Do you still have an issue with menu initialization in your table?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Yes still have the issue
Hi,
Unfortunately, we were not able to reproduce this issue so most likely it is related to your custom code.
I would suggest you to make sure that data is received and rendered correctly and MenuComponent.reinitialization() is called right afterward.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hmm will check to see again if I missed something - but the problem is when duplicating the Customers (in views/apps/customers) component.
When I did the exact same thing on a previous version I didn't have this problem, but on 8.1.6 I'm receiving it.
Hi,
Do you use two or more datatable instances on one page?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you for the suggestion, but It didn't work for me
reinitializeComponents();I was having the same issue.
data-kt-menu was not displaying dropdwon.
I have tried suggested solution by Lauris by it didn't work
MenuComponent.reinitialization()Then, I've called following function and it started to work.
reinitializeComponents();which is imported from keenthemes
Will check this out and see if it works - thanks for the suggestion!
Thank you very much!
I also had the same issue using Metronic 8 with vue3. I tried what Lauris suggested and it didn't work.
Thanks Qazi Muhammad, your suggestion solved the problem!
