Close drop down on item selection

[ricombnation]

I'm using the following PrimeBlock code for a user menu dropdown:

Code: Select all

<ul v-if="username"
    class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 border-bottom-1 lg:border-top-none lg:border-bottom-none border-gray-300 bg-white">
    <li class="lg:relative">
        <a class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 font-medium border-round cursor-pointer transition-colors transition-duration-150"
           v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
            <span v-text="username" class="text-sm"/>
            <i class="pi pi-angle-down ml-auto lg:ml-2"></i>
        </a>
        <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
            <li v-for="entry in userEntries">
                <Link :href="entry.url"
                      v-text="entry.label"
                      class="flex no-underline p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150">
                </Link>
            </li>
        </ul>
    </li>
</ul> 

Unfortunately, when a user clicks on a Link (menu item) the dropdown stays open. Is there an easy way to close the dropdown, when the user clicks on a menu item?

[tugce.kucukoglu]

It's a just quick workaround:

Code: Select all

<ul :class="['list-none ... ', { 'hidden': showMenu}]">
   <li>
       <a @click="onClick" >

Code: Select all

onClick() {
   this.showMenu = !this.showMenu;
}

[ricombnation]

Thanks ... simple and effective.

[mert.sincan]

Thanks @tugce