Livewire异常行为：Eloquent模型属性在开发工具中显示为空数组

API 探路者

2026-9-27

问题根因

该现象有两种可能性：

Livewire 对公共属性的序列化规则限制：公共属性直接存储 Eloquent 模型时，序列化过程可能受模型$hidden、$visible属性或者关联加载状态影响，导致前端快照显示异常
Livewire DevTools 本身的显示 Bug：部分版本的 DevTools 对复杂模型对象的解析渲染存在缺陷，实际属性值是正常的，仅显示错误

解决方案

方案1：显式序列化模型为数组（最稳定）

赋值时将模型转为数组，适配 Livewire 的序列化规则，DevTools 可正常显示内容：

public function showDetail($id)
{
    $this->transaction = Transaction::find($id)->toArray();
    $this->detailModal = true;
}

public function mount()
{
    $this->transaction = Transaction::find(1)?->toArray() ?? [];
}

视图层仅需要将原对象调用语法$transaction->字段名改为数组语法$transaction['字段名']即可。

方案2：使用计算属性存储模型（适配Livewire 3）

将transaction改为私有属性，通过计算属性暴露，避免属性同步到前端快照，从根源避免显示问题：

private ?Transaction $transaction = null;
public $detailModal = false;
public $selectedTransactionId;

public function showDetail($id)
{
    $this->selectedTransactionId = $id;
    $this->detailModal = true;
}

#[Computed]
public function getTransactionProperty()
{
    return Transaction::find($this->selectedTransactionId);
}

视图层可直接用$transaction按对象语法正常调用字段，不会出现序列化异常。