Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Dropdown menu not working within VueJS For Loop
Hello,
I am using VueJS and Metronic HTML template, I am using this widget https://preview.keenthemes.com/metronic8/demo1/widgets/feeds.html but the cards are rendered inside a for loop.
The dropdown menu is not showing :
<!--begin::Menu-->
<div class="my-0">
<button type="button"
class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end">
<!--begin::Svg Icon | path: icons/duotune/general/gen024.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="5" y="5" width="5" height="5" rx="1" fill="currentColor"></rect>
<rect x="14" y="5" width="5" height="5" rx="1" fill="currentColor" opacity="0.3"></rect>
<rect x="5" y="14" width="5" height="5" rx="1" fill="currentColor" opacity="0.3"></rect>
<rect x="14" y="14" width="5" height="5" rx="1" fill="currentColor" opacity="0.3"></rect>
</g>
</svg>
</span>
<!--end::Svg Icon-->
</button>
<!--begin::Menu 2-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">
Quick action
</div>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator mb-3 opacity-75">
</div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">{% translate "Modifier" %}</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3%20text-danger" target="_blank">{% translate "Supprimer" %}</a>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator mt-3 opacity-75">
</div>
<!--end::Menu separator-->
</div>
<!--end::Menu 2-->
</div>
<!--end::Menu-->Thanks
Replies (1)
Hi,
If data in your widget is rendered asynchronously, then you need to recall the menu reinitialization function once again.
The MenuComponent is initialized when the component is mounted, your widget rows most likely are rendered asynchronously, so you should call the menu reinitialization function once again when the rows in a widget are rendered.
MenuComponent.reinitialization();Regards,
Lauris Stepanovs,
Keenthemes Support Team
