如何在Livewire页面的单表单中处理多select选择器并解决参数丢失问题

问题原因 #

你遇到的参数为null的问题，核心是Livewire的公共属性绑定或updated钩子的取值逻辑错误导致的，可按以下步骤修复：

1. 组件类正确声明公共属性

在Livewire组件类顶部声明三个必填的公共属性，不要放在方法内部：

class YourComponent extends Component
{
    // 必须声明为public公共属性，Livewire才会自动同步前后端值
    public $city_from_id;
    public $city_to_id;
    public $date;

    // 其他自定义属性、方法
}

2. 前端select绑定正确

确认每个select的wire:model属性和组件公共属性名称完全一致，不要加.defer修饰符（defer会延迟同步到后端，实时触发钩子时拿不到值）：

<!-- 出发城市选择器 -->
<select wire:model="city_from_id">
    @foreach($cities as $city)
        <!-- 循环生成的option必须加唯一wire:key，避免渲染混乱 -->
        <option value="{{ $city->id }}" wire:key="from-{{ $city->id }}">{{ $city->name }}</option>
    @endforeach
</select>

<!-- 到达城市选择器 -->
<select wire:model="city_to_id">
    @foreach($cities as $city)
        <option value="{{ $city->id }}" wire:key="to-{{ $city->id }}">{{ $city->name }}</option>
    @endforeach
</select>

<!-- 日期选择器 -->
<select wire:model="date">
    @foreach($dates as $d)
        <option value="{{ $d }}" wire:key="date-{{ $d }}">{{ $d }}</option>
    @endforeach
</select>

3. updated钩子正确取值

updated{属性名}钩子的入参只有当前被修改属性的新值，其他属性不要从入参取，直接读组件的公共属性即可：

// 修改日期时触发的钩子
public function updatedDate($value)
{
    // 直接取$this上的公共属性，即可拿到另外两个选择器已选的值
    $from = $this->city_from_id;
    $to = $this->city_to_id;
    $date = $this->date;

    // 三个参数都不为空时再查询可用路线
    if ($from && $to && $date) {
        $this->available_routes = Route::query()
            ->where('city_from_id', $from)
            ->where('city_to_id', $to)
            ->where('date', $date)
            ->get();
        // 查询到路线后即可解锁后续表单字段的填写权限
    }
}

// 出发城市修改触发的钩子，直接复用上面的查询逻辑
public function updatedCityFromId()
{
    $this->updatedDate($this->date);
}

// 到达城市修改触发的钩子，直接复用上面的查询逻辑
public function updatedCityToId()
{
    $this->updatedDate($this->date);
}

额外排查点

不要在组件的render()方法或者其他生命周期钩子中重置上述三个公共属性的值，否则每次组件重新渲染时都会清空已选值。

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