为什么调用Livewire组件空函数会修改数据导致films_count丢失？

问题原因 #

这个是Livewire公共属性序列化Eloquent模型时的典型特性，本质原因如下：

1. withCount生成的films_count属于动态临时字段，既不在Tag模型的数据库原生字段列表里，也没有被显式加入模型的序列化白名单
2. 首次加载时页面正常是因为首次渲染走的是后端Blade直出逻辑，还没有触发Livewire的属性序列化流程。当你点击按钮触发Livewire请求时，Livewire会走「脱水（把后端公共属性序列化后存在前端缓存）→ 重水（前端把缓存的序列化数据传回后端重建公共属性）」的流程，这个过程中不在模型序列化白名单里的films_count会被直接丢弃，导致后续逻辑里该字段丢失。

解决方案 #

你可以任选以下一种方案解决：

• 方案一：直接将查询结果转成数组存储，避免Eloquent模型序列化规则的影响，修改mount方法即可：

$this->allTags = Tag::query()
    ->withCount('films')
    ->orderByDesc('films_count')
    ->orderBy('name')
    ->get()
    ->toArray();

• 方案二：在Tag模型中显式将films_count加入序列化白名单，在Tag类中添加以下代码：

// 自动加载films_count
protected $withCount = ['films'];
// 显式加入序列化字段
protected $appends = ['films_count'];

• 方案三：不需要前端修改的纯展示数据不要定义为公共属性，直接在render方法中传递给视图，避免Livewire序列化：

// 删除public $allTags的定义
public function render()
{
    $allTags = Tag::query()
        ->withCount('films')
        ->orderByDesc('films_count')
        ->orderBy('name')
        ->get();
    return view('livewire.test', compact('allTags'));
}

另外建议你前端模板里给Alpine传值时显式使用@json指令，写法更规范：

<div x-data="{ allTags: @json($allTags) }">

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