How to close dropdown after clicking on menu item

I have a dropdown menu using NUXT JS and tailwind CSS but the problem with nuxt-js, as it doesn't change pages using SSR the dropdown doesn't close how do I make the dropdown close when I click on the menu item

This is the template

      <!-- dropdown -->        <button class="mt-1 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800 sm:mt-0 sm:ml-2"          type="button" v-on:click="toggleDropdown()" ref="btnDropdownRef">          Applications        </button>        <div v-bind:class="{'hidden': !dropdownPopoverShow, 'block': dropdownPopoverShow}"          class="bg-gray-800 w-full md:w-1/5 text-white z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"           ref="popoverDropdownRef">          <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/education">          education          </NuxtLink>          <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/lifescience">          life sciences           </NuxtLink>          <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/education">          media          </NuxtLink>          <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/">          industries          </NuxtLink>          <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/">          agriculture          </NuxtLink>        </div>    

and this is the script

<script>    import {      createPopper    } from "@popperjs/core";      export default {      data() {        return {          isOpen: false,          dropdownPopoverShow: false,        }      },      methods: {        toggleDropdown: function () {          if (this.dropdownPopoverShow) {            this.dropdownPopoverShow = false;          } else {            this.dropdownPopoverShow = true;            createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {              placement: "bottom-start"            });          }        }      }    }  </script>  

https://stackoverflow.com/questions/66845119/how-to-close-dropdown-after-clicking-on-menu-item March 29, 2021 at 02:59AM