使用 Livewire 的 Bootstrap 模态反应性答案

【问题标题】：Bootstrap Modal Reactivity With Livewire使用 Livewire 的 Bootstrap 模态反应性
【发布时间】：2021-11-23 13:02:19
【问题描述】：

我在我的 laravel 8 和 livewire 项目中使用 bootstrap 4 modal，问题是电线的反应性：模型不起作用，

应用布局：

    {{ $modal ?? '' }}

    <script src="/js/app.js"></script>
    @livewireScripts
</body>
</html>

Livewire 控制器：

class Table extends Component
{
    use WithPagination;
    
    protected $paginationTheme = 'bootstrap';

    public $excel = 'hello';
    
    public function render()
    {
        return view('livewire.budgets.table', [
            'budgets' => Budget::with('owner')->simplePaginate(5)
        ]);
    }
}

index.blade.php（laravel 组件）：

<x-app-layout title="Budget">
    <x-slot name="description">
        You can create, modify,  and review your budget plan here.
    </x-slot>
    
    <livewire:budgets.table />
</x-app-layout>

table.blade.php（livewire 组件）：

    <div>
<button class="btn btn-success mr-2" data-toggle="modal" data-target="#excelModal">Excel</button>
    <x-slot name="modal">
        {{-- Budget Modal --}}
        <x-modal title="Budget Modal" id="budgetModal">
            Budget Modal
        </x-modal>

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

modal.blade.php（Laravel 组件）：

<div class="modal fade" tabindex="-1" role="dialog" {{ $attributes }}>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">{{ $title }}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            {{ $slot }}
        </div>
        <div class="modal-footer bg-whitesmoke br">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
</div>

如何解决这个问题？

【问题讨论】：

标签： bootstrap-4 laravel-livewire

【解决方案1】：

有什么问题？试试这个

{{-- Excel Modal --}}
<x-modal title="Excel Modal" id="excelModal" wire:ignore.self>
   Excel Modal
   <input type="text" class="form-control" wire:model.lazy="excel">
   {{ $excel }}
</x-modal>

// in component

public function updatedExcel($value)
{
  dd($value);
}

【讨论】：

是的，wire:ignore.self 解决了我的问题，谢谢！