Livewire V3+Laravel10+Bootstrap：Off Canvas导航与表单验证问题求助

问题1：wire:navigate返回后Offcanvas遮罩层叠加变深 #

使用wire:navigate跳转页面再返回后，Offcanvas的背景遮罩会多次叠加，需要点击多次才能关闭并操作页面。

解决思路 #

wire:navigate会保留页面部分DOM，导致Bootstrap的Offcanvas实例未被正确销毁，返回后重新渲染组件时又生成新实例，遮罩层重复叠加。通过Livewire生命周期钩子手动管理Offcanvas实例：

修改子组件代码，添加实例销毁与初始化逻辑：

<div>
    <button class="btn btn-alt-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#activateNewPetTag" aria-controls="activateNewPetTag">
        Activate New Pet Tag
    </button>

    <div class="offcanvas offcanvas-end bg-body-extra-light" tabindex="-1" id="activateNewPetTag" aria-labelledby="activateNewPetTagLabel">
        <div class="offcanvas-header bg-body-light">
            <div wire:loading class="spinner-border spinner-border-sm text-primary"></div>
            <h5 class="offcanvas-title" id="activateNewPetTagLabel">Activate New Pet Tag</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form wire:submit="activate">
                <x-forms.text-input type="text" placeholder="Activation Code" name="activationCode" />

                <div class="mt-4 mb-4">
                    <x-forms.button title="Activate" class="alt-primary" />
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('livewire:init', () => {
                Livewire.hook('component.destroyed', (component) => {
                    if (component.name === 'user.pets.components.activate-pet-code') {
                        const offcanvasElement = document.getElementById('activateNewPetTag');
                        if (offcanvasElement) {
                            const offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvasElement);
                            if (offcanvasInstance) {
                                offcanvasInstance.hide();
                                offcanvasInstance.dispose();
                            }
                        }
                    }
                });
            });
        </script>
    @endpush
</div>

问题2：表单提交（含验证错误）时Offcanvas自动关闭 #

提交表单后即使存在验证错误，Offcanvas也会自动关闭；添加wire:ignore.self能保持弹窗打开，但会丢失背景遮罩。

解决思路 #

不给整个Offcanvas容器加wire:ignore.self，通过Livewire事件手动控制弹窗显示状态，在验证失败时强制保持打开：

1. 修改组件PHP逻辑（假设组件类为ActivatePetCode）：

public function activate()
{
    $validated = $this->validate([
        'activationCode' => 'required|string',
        // 其他验证规则
    ]);

    try {
        // 执行激活操作
        // 成功后触发关闭事件
        $this->dispatch('close-offcanvas');
    } catch (\Exception $e) {
        // 失败时触发保持打开事件
        $this->dispatch('keep-offcanvas-open');
    }
}

2. 子组件前端添加事件监听：

<!-- 保留原Offcanvas代码 -->

@push('scripts')
    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('keep-offcanvas-open', () => {
                const offcanvasElement = document.getElementById('activateNewPetTag');
                const offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvasElement);
                if (offcanvasInstance && !offcanvasInstance._isShown) {
                    offcanvasInstance.show();
                }
            });

            Livewire.on('close-offcanvas', () => {
                const offcanvasElement = document.getElementById('activateNewPetTag');
                const offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvasElement);
                if (offcanvasInstance) {
                    offcanvasInstance.hide();
                }
            });
        });
    </script>
@endpush

额外提示：确保表单使用wire:submit.prevent（Livewire默认行为），避免默认提交行为触发弹窗关闭。

内容的提问来源于stack exchange，提问作者Ethan Patchell