Flowbite插件在Vue RouterView渲染组件中下拉功能不生效问题

问题表现 #

• 基于Vue开发的仪表盘应用，已按官方文档完成Flowbite依赖的安装与全局配置
• 应用根组件内直接渲染的TopBar组件中，用户下拉菜单交互完全正常
• 通过RouterView动态注入渲染的业务页面中，CardStatus组件内的下拉菜单点击无响应，功能完全失效

关联代码 #

App.vue 根组件结构 #

<template>
  <div class="flex flex-row min-h-screen w-screen">
    <SideBar />

    <div class="flex flex-col w-full bg-gray-300 shrink min-w-0">
      <TopBar />

      <RouterView />
    </div>
  </div>
</template>

正常运行的TopBar下拉代码 #

<button
  type="button"
  class="flex mr-3 text-sm md:mr-0 items-center"
  id="user-menu-button"
  aria-expanded="false"
  data-dropdown-toggle="user-menu"
>
  <span class="sr-only">Open user menu</span>
  <img
    class="w-8 h-8 rounded-full border-green"
    src="https://picsum.photos/200"
    alt="user photo"
  />
  <span class="ml-3 text-medium text-gray-500"
    >Hallo, <span class="font-semibold">Leon!</span></span
  >
</button>

<!-- Dropdown menu -->
<div
  class="
    hidden
    z-50
    my-4
    text-base
    list-none
    bg-white
    rounded
    divide-y divide-gray-100
    shadow
    dark:bg-gray-700 dark:divide-gray-600
  "
  id="user-menu"
  style="
    position: absolute;
    inset: auto auto 0px 0px;
    margin: 0px;
    transform: translate(1246px, 723px);
  "
  data-popper-reference-hidden=""
  data-popper-escaped=""
  data-popper-placement="top"
>

RouterView 渲染的页面入口 #

<template>
  <main class="w-full h-full py-5 px-5">
    <CardStatus />

    <Card class="max-w-3xl max-h-80 p-5">
      <div class="mb-4 flex flex-row justify-between">
        <h5
          class="
            text-xl
            font-semibold
            tracking-tight
            text-gray-900
            dark:text-white
          "
        >

功能失效的CardStatus下拉代码 #

<button
  id="dropdownDefault"
  data-dropdown-toggle="dropdown"
  class="
    text-white
    bg-blue-700
    hover:bg-blue-800
    focus:ring-4 focus:outline-none focus:ring-blue-300
    font-medium
    rounded-lg
    text-sm
    px-4
    py-2.5
    text-center
    inline-flex
    items-center
    dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
  "
  type="button"
>
  Dropdown button
  <svg
    class="w-4 h-4 ml-2"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M19 9l-7 7-7-7"
    ></path>
  </svg>
</button>
<!-- Dropdown menu -->
<div
  id="dropdown"
  class="
    z-10
    hidden
    bg-white
    divide-y divide-gray-100
    rounded
    shadow
    w-44
    dark:bg-gray-700
  "
>
  <ul
    class="py-1 text-sm text-gray-700 dark:text-gray-200"
    aria-labelledby="dropdownDefault"
  >

故障原因 #

原生Flowbite是面向静态页面设计的类库，默认初始化逻辑仅会在页面首次加载时扫描全量DOM，为所有带data-dropdown-toggle属性的元素绑定下拉交互事件。
Vue Router切换路由时，会动态向DOM插入路由对应的组件节点，这些新插入节点里的下拉元素不会被Flowbite的初始扫描逻辑捕获，没有绑定对应的点击触发事件，因此点击无响应。TopBar组件是应用启动时就存在于DOM结构中的，初始化阶段就完成了事件绑定，所以可以正常运行。

修复方案 #

• 动态渲染完成后手动重初始化下拉组件
  可以在路由全局后置钩子、路由组件的onMounted生命周期、或者包含动态组件的父组件更新完成后，调用Flowbite提供的initDropdowns方法，重新扫描DOM绑定事件，示例代码：

  import { onMounted } from 'vue'
  import { initDropdowns } from 'flowbite'
  
  // 在CardStatus组件挂载完成后执行初始化
  onMounted(() => {
    initDropdowns()
  })
  

  全局路由统一处理的写法：

  import { createRouter } from 'vue-router'
  import { initDropdowns } from 'flowbite'
  
  const router = createRouter({/* 路由配置 */})
  router.afterEach(() => {
    // 每次路由切换完成后重新初始化所有下拉组件
    initDropdowns()
  })
  

• 替换为框架适配版本
  直接使用Flowbite官方推出的Vue版本组件库，所有组件均为Vue原生实现，不存在DOM动态渲染后事件丢失的问题，不需要手动调用初始化方法，适配性更好。
• 针对动态加载的下拉手动实例化
  对于路由内动态渲染的下拉组件，不依赖data属性自动绑定，在组件挂载后手动传入触发元素和菜单元素，实例化Dropdown对象完成事件绑定。

内容的提问来源于stack exchange，提问作者Fabian Wassermann