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

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

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();
worked for me

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!

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