Vue 3 - Loading Dropdown Menu does not work properly
When I use a v-if="toolbarStatus" in the first DIV element, it does shows the button, but it does not shows the Dropdown3 elements. This only happens when I'm from route "A" going to end route "B" which loads the Toolbar. Does this have to do with router-link which I'm using in route A to get to route B?
If I just directly go to the end route or refresh it, it works perfectly.
<div class="card-toolbar" v-if="toolbarStatus">
<!--begin::Menu-->
<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"
data-kt-menu-flip="top-end"
>
<span class="svg-icon svg-icon-2">
<inline-svg
src="media/icons/duotone/Layout/Layout-4-blocks-2.svg"
/>
</span>
</button>
<Dropdown3></Dropdown3>
<!--end::Menu-->
</div>
Replies (7)
If you're troubleshooting UI behavior like a Vue dropdown issue, smooth and reliable transport booking systems matter too. A premium luxury chauffeur service London can benefit from responsive Vue 3 interfaces to improve customer experience and real-time booking navigation. eliteexecutives.co.uk
playcolorblockjam is the ultimate resource for Color Block Jam enthusiasts.
Hi,
v-if will hide elements with all child elements. If your first div element is hidden when your button and dropdown components will be hidden as well.
Could you please specify what you want to display on your page?
Lauris, the button is shown as the value of toolbarStatus is true. It renders. But if I click on the element (button). It does not show the dropdown.
Sorry for the misunderstanding.
You can try to reinitialize MenuComponent in your vue component.
MenuComponent.reinitialization();
Hi Lauris,
A great thanks for that tip. It has just saved ma day.
Please can you give more explanations about why we have to do that so it works??
Thanks again
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
