Bootstrap 与 Livewire 的模态反应

Question

我为我的 laravel 8 和 livewire 项目使用 bootstrap 4 模态，问题是 wire:model 的反应性不起作用，

应用布局：

    {{ $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（火线组件）：

    <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>

如何解决这个问题？

Answer 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);
}

Bootstrap 与 Livewire 的模态反应

Bootstrap Modal Reactivity With Livewire

bootstrap-4

laravel-livewire