javascript - 单击菜单项后如何关闭下拉菜单

Question

我有一个使用 NUXT JS 和 tailwind CSS 的下拉菜单，但是 nuxt-js 的问题，因为它不会使用 SSR 更改页面，所以下拉菜单不会关闭当我单击菜单项时如何关闭下拉菜单

这是模板

      <!-- 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>

这是脚本

<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>

标签： javascriptvue.jsnuxt.jstailwind-css

Answer 1

我最终使用了 watch route 方法

 watch: {
    '$route' () {
      // this will close the dropdown
      this.dropdownPopoverShow = false,  
      // this will close the mobile menu on page change
      this.isOpen = false
    }