Livewire三级下拉框交互异常：非预期类型转换报错排查

我的页面包含3个下拉框，交互逻辑如下：

• client下拉框：用于选择用户
• company下拉框：不依赖client下拉框
• period下拉框：仅依赖company下拉框

仅按「选择client→选择company」的顺序操作时功能正常，但执行「选择company→选择client/period」的流程时，会出现报错，调试提示$option不是数组而是对象。

进一步调试发现：

• 初始选择company后，$periodOptions为stdClass对象数组
• 后续选择client或period时，$periodOptions变为包含stdClass对象与普通数组的混合结构，导致视图遍历失败

Livewire组件代码 #

public $clientOptionSelected, $companyOptionSelected, $periodOptionSelected;
public $clientOptions = [], $companyOptions = [], $periodOptions = [];

protected $rules = [
    'clientOptionSelected' =>  'required',
    'companyOptionSelected' => 'required',
    'periodOptionSelected' => 'required'
];

public function updated($propertyName)
{
    $this->validateOnly($propertyName);
}

public function render()
{
    $this->clientOptions = DB::select('exec SP_PG @opc=:opc',['opc' => 4]);
    $this->companyOptions = DB::select('exec SP_PG @opc=:opc',['opc' => 5]);
    return view('livewire.create-company-component');
}

public function submit()
{
    $this->validate();
   //$result = DB::select('exec SP_PG @opc=:opc , @idCliente=:idCliente , @idBaseDatos=:idVaseDatos',['opc' => 7,'idCliente'=>$this->clientOptionSelected,'idBaseDatos' => $this->periodOptionSelected]);
}

public function updatedCompanyOptionSelected()
{
    $this->periodOptions = DB::select('exec SP_PG @opc=:opc,@descripcion=:descripcion',['opc' => 6 , 'descripcion' => $this->companyOptionSelected]); 
}

HTML代码 #

<div>
    <form wire:submit.prevent="submit" method="POST">
        @csrf
        <label>Selecciona un Cliente</label>
        <select wire:model="clientOptionSelected" name="client" class="form-control" id="cbxCliente">
            <option value="">Selecciona una opción</option>
            @foreach ($clientOptions as $option)
                <option value="{{ $option->val }}">{{ $option->text }}</option>
            @endforeach
        </select>
        @error('clientOptionSelected')
            <span class="error">{{ $message }}</span>
        @enderror
        <br>
        <label>Selecciona una Empresa</label>
        <select wire:model="companyOptionSelected" name="company" class="form-control" id="cbxEmpresa">
            <option value="">Selecciona una opción</option>
            @foreach ($companyOptions as $option)
                <option value="{{ $option->val }}">{{ $option->text }}</option>
            @endforeach
        </select>
        @error('companyOptionSelected')
            <span class="error">{{ $message }}</span>
        @enderror
        <br>
        <label>Selecciona una Periodo</label>
        <div wire:loading.remove>
            <select wire:model="periodOptionSelected" name="period" class="form-control" id="cbxPeriodo">
                <option value="">Selecciona una opción</option>
                @foreach ($periodOptions as $option)
                    <option value="{{ $option->val }}">{{ $option->text }}</option>
                @endforeach
            </select>
        </div>
        @error('periodOptionSelected')
            <span class="error">{{ $message }}</span>
        @enderror
        <div wire:loading class="form-control spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <br>
        <button class="btn btn-success" id="btnSave">Guardar</button>
    </form>
</div>

调试数据 #

初始选择company后，$periodOptions结构： #

Array
(
[0] => stdClass Object
    (
        [val] => 
        [text] => Selecciona una opción
    )

[1] => stdClass Object
    (
        [val] => 79
        [text] => AHL Quincena
    )

[2] => stdClass Object
    (
        [val] => 80
        [text] => Periodo Extraordinario
    )

[3] => stdClass Object
    (
        [val] => 81
        [text] => PTR MENSUAL
    )

[4] => stdClass Object
    (
        [val] => 82
        [text] => PTR mensual NO TIMBRAR
    )

 )

后续选择client或period后，$periodOptions结构变为： #

Array
(
[0] => stdClass Object
    (
        [val] => 
        [text] => Selecciona una opción
    )

[1] => Array
    (
        [val] => 57
        [text] => COL QUINCENA
    )

[2] => Array
    (
        [val] => 58
        [text] => NNB QUINCENAL
    )

[3] => Array
    (
        [val] => 59
        [text] => PAN QUINCENAL
    )

[4] => Array
    (
        [val] => 60
        [text] => Periodo Extraordinario
    )

[5] => Array
    (
        [val] => 61
        [text] => Quincenal
    )

[6] => Array
    (
        [val] => 62
        [text] => STU BIF NITTI QUINCENAL
    )

)

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