Tailwind & Vue-Router - dropdown menu doesn't close when clicking on menu items

Question

I'm using the following dropdown menu in tailwind & vue-router https://codepen.io/huphtur/pen/ordMeN.

I need to use <router-link to="/"> inside the dropdown menu, but I found out that doing that, once you click on a menu link the dropdown doesn't close as it should do. Using normal <a> elements the dropdown closes like it should.

This is the code:

dropdown element comp

<div v-if="isOpen == false" class="dropdown inline-block relative sm:ml-20">
          <button class="text-gray-700 font-normal py-2 px-4 rounded inline-flex items-center">
            <span class="mr-1 cursor-default">Vita</span>
          </button>
          <ul class="w-32 dropdown-menu absolute hidden text-gray-700 pt-1 shadow-lg z-10">
            <li > <router-link to="/biografia"> <a class="rounded-t bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Bio </a> </router-link> </li>
            <li > <router-link to="/tour"> <a class="bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Tour </a> </router-link> </li>
            <li > <router-link to="/foto"> <a class="bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Foto </a> </router-link> </li>
            <li > <router-link to="/video"> <a class="rounded-b bg-white  hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Video </a> </router-link> </li>
          </ul>
        </div>
}

css style in the comp

.dropdown:hover .dropdown-menu {
  display: block;
}

How can I implement this functionality using <router-link to="/">?

Thanks!

RouterLink generates an element in its place. No need to nest another link inside. Just apply the tailwind classes to the RouterLink components. — Excalibaard, Aug 19 '20 at 09:46
Alright, that's a good suggestion but it still doesn't work like it should. — nicoblue, Aug 19 '20 at 10:56
Can you post more of your code, in particular where youve defined your ``? Even more helpful would be a working example on jsfiddle or a similar site. — Justin, Aug 20 '20 at 13:13

score 0 · Answer 1 · answered Sep 08 '20 at 16:28

router-link exposes a slot for you to enable customizations. I have used this in the past to apply styling to an outer li element when the router-link was active, but you can use the same approach for closing your dropdown as well.

  <router-link
    to="/"
    v-slot="{ href, route, navigate, isActive, isExactActive }"
  >
    <a
      :href="href"
      @click="isOpen = false; navigate($event)"
    >
      Homepage
    </a>
  </router-link>

Source

Tailwind & Vue-Router - dropdown menu doesn't close when clicking on menu items

1 Answers1