How can I listen to a "data-dropdown-toggle" event change in vue?

[FerchoCarcho]

Because when a Link inside the dropdown menu is clicked, the dropdown itself remains opened, and It should close, this condition happens when using Vuejs's router-link links, because as a SPA Doesnt need to reload the page like tags, it follows the link correctly but the dropdown remains opened. Any help is very appreciated

[Yashkapure06]

Hey @FerchoCarcho i guess you mean this

When you copy and paste the code in your Editor and start the server, as soon as u start the server you get the drop down open to avoid that

for example
<div id="mega-menu-full-image-dropdown" class=" **hidden** mt-1 bg-white border-gray-200 shadow-sm border-y dark:bg-gray-800 dark:border-gray-600">

over here

Add HIDDEN class over there
This might solve your issue

[FerchoCarcho]

Hello and thank you for the answer, moreover the Question was to be able to close the dropdown menu or a megamenu when a link inside it has been clicked, im trying to acomplish that along with the vue's router-link component

[Yashkapure06]

OKay Got it Will help you out!

[Yashkapure06]

<button @click="toggleDropdown" id="mega-menu-full-cta-image-button"
                                data-collapse-toggle="mega-menu-full-image-dropdown"
                                class="flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 md:w-auto hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-main-orange md:p-0 dark:text-gray-400 md:dark:hover:text-main-orange dark:hover:bg-gray-700 dark:hover:text-main-orange md:dark:hover:bg-transparent dark:border-gray-700">Services
                                <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg></button>

---

<div v-if="showDropdown" id="mega-menu-full-image-dropdown">
 ..
 <ul class="hidden mt-6 space-y-4 md:mb-0 md:block" aria-labelledby="mega-menu-full-image-button">
                        <li>
                            <router-link  @click.native="closeDropdown" to="/yourroute"
                                class=" hover:text-main-orange dark:hover:text-main-orange">
                                Route Name
                            </router-link>
                        </li>
</ul>
</div>

---

<script>
export default {
    data() {
        return {
            showDropdown: false,
        };
    },
    methods: {
        checkWindowSize() {
            this.isMobile = window.innerWidth <= 768;
        },
        toggleDropdown() {
            this.showDropdown = !this.showDropdown;
        },
        closeDropdown() {
              this.showDropdown = false;
        },
    },
}
</script>

Check this code properly This will definately help you

compare the code at flowbite as well you will understand