Laravel Livewire 3.0多选框数组提交为空问题求助

核心错误 #

你的代码里存在拼写错误：多选框的绑定指令写成了wire:modal='slots'，正确的Livewire表单双向绑定指令是wire:model，这是导致$slots始终为空的根本原因。

修正步骤 #

1. 修正绑定指令：将所有多选框的wire:modal='slots'替换为wire:model="slots"，Livewire通过wire:model实现组件属性与表单元素的数据同步，而wire:modal是用于模态框的专用指令，和表单绑定无关。
2. 确认数组绑定逻辑：由于组件中$slots已声明为数组类型，Livewire会自动将所有选中的多选框值收集到该数组中，无需额外配置。

修正后的模板代码 #

<div class="flex justify-center items-center">
    <div class="w-full mx-auto py-4">
        <form action="#" method="POST" wire:submit="save">
            <div class="max-w-6xl mx-auto p-6 bg-white rounded-lg shadow-xl animate-fade-in-down">
                <h1 class="text-3xl font-semibold mb-6 text-center">{{ __('Select Seats') }}</h1>
                <!-- Seat Map Container -->
                <div class="grid grid-cols-20 gap-6 shadow-md bg-white rounded-lg p-4 animate-fade-in-up">
                    <!-- Generate Seats -->
                    @for ($row = 1; $row <= 10; $row++)
                        <div class="flex items-center justify-between flex-wrap">
                            @foreach( range('A', 'T') as $element)
                                <div class="p-0.5">
                                    <input wire:model="slots" type="checkbox" id="seat-{{ $row }}{{ $loop->iteration }}" class="absolute opacity-0 w-full h-full cursor-pointer hidden peer" value="{{ $element }}{{ $row }}">
                                    <label for="seat-{{ $row }}{{ $loop->iteration }}" class="h-10 w-10 relative p-2 border-green-400 border rounded-md transform hover:scale-125 hover:bg-green-400 hover:border-white transition-transform flex justify-center items-center peer-checked:bg-green-400 cursor-pointer">
                                        {{ $element }}{{ $row }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    @endfor
                </div>
                <!-- Number of Tickets Input -->
                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700">{{ __('Selected Tickets') }} : {{ count($slots) }}</label>
                </div>
        
                <!-- Book Button -->
                <div class="mt-6 text-center">
                    <button class="bg-pink-600 text-white px-6 py-3 rounded-md hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-300 focus:ring-opacity-50" type="submit">
                        {{ __('Book Tickets') }}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

验证效果 #

修正完成后，提交表单时$slots会正确接收选中的座位值数组，前端的count($slots)也会实时同步显示当前选中的座位数量。

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