Laravel 10 + Livewire 3导航栏下拉菜单间歇性失效求助

问题根源 #

下拉菜单时好时坏的核心原因是Livewire的wire:navigate导航机制：使用该属性跳转页面时，Livewire会通过AJAX异步更新页面内容，但Bootstrap下拉组件的交互事件仅在页面首次加载时完成绑定。新渲染的导航栏DOM元素没有重新绑定Bootstrap的下拉逻辑，导致点击无响应。

解决方案 #

方案1：监听Livewire导航事件重新初始化下拉组件 #

这是最直接的修复方式，全局监听Livewire导航完成事件，每次页面更新后重新初始化下拉组件：

修改app.blade.php的脚本部分：

<script src="js/bootstrap.bundle.min.js"></script>
<script>
// 监听Livewire导航完成事件
document.addEventListener('livewire:navigated', () => {
    // 遍历所有下拉触发元素，重新初始化
    document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(element => {
        // 先销毁旧实例避免冲突
        if (element._dropdown) {
            element._dropdown.dispose();
        }
        // 创建新的下拉实例
        element._dropdown = new bootstrap.Dropdown(element);
    });
});
</script>

方案2：将导航栏转为Livewire组件（更优雅的实现） #

把导航栏封装成Livewire组件，利用组件生命周期钩子触发初始化：

1. 创建组件类：app/View/Components/Layouts/Navbar.php

<?php

namespace App\View\Components\Layouts;

use Illuminate\View\Component;

class Navbar extends Component
{
    public function render()
    {
        return view('components.layouts.navbar');
    }

    // 组件每次重新渲染时触发
    public function hydrate()
    {
        $this->dispatch('navbar-ready');
    }
}

2. 修改navbar.blade.php，添加初始化脚本：
   在导航栏代码末尾加入：

<script>
document.addEventListener('navbar-ready', () => {
    const dropdownToggle = document.querySelector('.nav-link.dropdown-toggle');
    if (dropdownToggle) {
        if (dropdownToggle._dropdown) dropdownToggle._dropdown.dispose();
        dropdownToggle._dropdown = new bootstrap.Dropdown(dropdownToggle);
    }
});
</script>

3. 在app.blade.php中替换原引用方式：

<x-layouts.navbar />

方案3：临时禁用特定链接的wire:navigate（应急方案） #

如果不需要某些页面的局部刷新，可以去掉对应链接的wire:navigate属性，但会失去Livewire导航的性能优势，仅作为临时修复：

<a class="nav-link dropdown-item" href="/info">Info</a>

额外检查点 #

• 确认Bootstrap版本为5.x（你的代码使用data-bs-*属性，对应Bootstrap5，版本不匹配会导致交互异常）
• 打开浏览器控制台（F12），检查bootstrap.bundle.min.js是否正常加载（无404错误）
• 确保页面仅加载一次bootstrap.bundle.min.js，避免重复引入引发冲突

内容的提问来源于stack exchange，提问作者Endricho Folabessy