Laravel8+Livewire项目中Bootstrap4 Modal的wire:model响应失效如何解决

你当前的写法将Modal组件通过modal插槽渲染到了app-layout中，位置处于Livewire组件<livewire:budgets.table />的根DOM范围之外。Livewire默认只会监听自身根节点内部的wire:指令事件，因此Modal内部的wire:model绑定无法生效。

可根据你的业务需求选择以下任意一种方案：

方案1：将Modal移到Livewire组件内部（最推荐） #

直接去掉table.blade.php中包裹Modal的x-slot标签，把Modal直接写在Livewire组件的根div内，保证其处于Livewire的监听范围内，改完即可生效：

<div>
    <button class="btn btn-success mr-2" data-toggle="modal" data-target="#excelModal">Excel</button>

    {{-- 预算模态框 --}}
    <x-modal title="Budget Modal" id="budgetModal">
        预算模态框
    </x-modal>

    {{-- Excel模态框 --}}
    <x-modal title="Excel Modal" id="excelModal">
        Excel模态框
        <input type="text" class="form-control" wire:model="excel">
        {{ $excel }}
    </x-modal>
</div>

方案2：保留全局插槽的情况下手动绑定事件 #

如果你必须要把Modal放在全局layout的插槽中，可以手动给输入框绑定事件触发Livewire的数据更新，实现和wire:model一致的效果：

<x-slot name="modal">
    {{-- 预算模态框 --}}
    <x-modal title="Budget Modal" id="budgetModal">
        预算模态框
    </x-modal>

    {{-- Excel模态框 --}}
    <x-modal title="Excel Modal" id="excelModal">
        Excel模态框
        <input 
            type="text" 
            class="form-control" 
            value="{{ $excel }}"
            oninput="Livewire.find('{{ $this->id }}').set('excel', this.value)"
        >
        {{ $excel }}
    </x-modal>
</x-slot>

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