选择单选框后无法访问变量，Laravel Livewire报错

你遇到的问题核心有两个：一是单选按钮缺少value属性，导致Livewire无法正确绑定选中值；二是组件传递的Eloquent模型在Livewire序列化/反序列化过程中被转为数组，模板里仍用对象语法访问属性引发报错。

修复步骤 #

1. 给单选按钮添加value属性

没有value的话，Livewire无法识别你选中的是哪个选项，会触发异常的属性更新逻辑。同时调整模板中模型属性的访问方式，避免直接操作数组索引中的模型：

修改组件blade文件：

<div>
@foreach($options['items'] as $itemGroup)
    @php
        $optionModel = $itemGroup[0];
    @endphp
    <div class="custom-control custom-radio">
        <input 
             wire:model="selected" 
             class="custom-control-input" 
             type="radio"
             id="rdio_{{ $optionModel->id }}_{{ $options['option']->id }}"
             value="{{ $optionModel->id }}"> <!-- 必须添加value属性 -->

        <label class="custom-control-label" for="rdio_{{ $optionModel->id }}_{{ $options['option']->id }}">
            {{ $optionModel->title }}
        </label>
    </div>
@endforeach
</div>

2. 优化组件的模型数据处理（可选但推荐）

如果不想依赖Livewire对Eloquent模型的序列化处理，可以在组件初始化时把模型转换为纯数组，避免后续反序列化时模型变数组的问题：

修改组件类：

class TestOptions extends Component {
    public $selected;
    public $options;

    public function mount($options)
    {
        // 提取模型中需要的字段转为数组，避免序列化问题
        $this->options = [
            'option' => [
                'id' => $options['option']->id,
                // 按需添加其他需要的字段
            ],
            'items' => collect($options['items'])->map(function($group) {
                $model = $group[0];
                return [
                    'id' => $model->id,
                    'title' => $model->title
                ];
            })->toArray()
        ];
    }

    public function render()
    {
        return view('livewire.test-options');
    }
}

对应的模板也要改成数组访问语法：

<div>
@foreach($options['items'] as $item)
    <div class="custom-control custom-radio">
        <input 
             wire:model="selected" 
             class="custom-control-input" 
             type="radio"
             id="rdio_{{ $item['id'] }}_{{ $options['option']['id'] }}"
             value="{{ $item['id'] }}">

        <label class="custom-control-label" for="rdio_{{ $item['id'] }}_{{ $options['option']['id'] }}">
            {{ $item['title'] }}
        </label>
    </div>
@endforeach
</div>

这样修改后，单选按钮的绑定逻辑会正常工作，也不会再出现数组访问对象属性的错误。

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