Laravel Livewire异常问题：视图未接收更新数据无法高亮职位

我看到你遇到的问题了——点击职位后viewedJob已经更新，但视图里的高亮样式没跟上。这大概率是两个小细节导致的，咱们一步步来修复：

1. 替换无效的Vue风格key为Livewire的wire:key #

你的Blade视图里用了:key="$loop->index"，这是Vue的语法，Livewire根本识别不了！Livewire需要用wire:key来追踪列表中的每个元素，这样它才能准确知道哪个项需要更新样式。

修改后的<li>标签应该是这样：

<li wire:key="job-{{ $job['id'] }}" class="@if($viewedJob && $viewedJob->id == $job['id']) border border-primary @endif my-1 w-full bg-white p-3 rounded-md @if(!$loop->first) my-3 @endif">

用job-{{ $job['id'] }}作为key，保证每个列表项的key唯一，Livewire就能精准定位到需要高亮的项了。

2. 增加viewedJob的空值判断 #

初始加载时$viewedJob是null，直接访问$viewedJob->id会抛出错误，导致页面渲染异常，自然也看不到高亮。咱们给判断加个前置条件：

@if($viewedJob && $viewedJob->id == $job['id'])

这样只有当viewedJob存在且ID匹配时，才会应用高亮样式。

3. 可选：设置初始选中的职位（提升用户体验） #

如果希望页面加载时就默认选中第一个职位，可以在mount方法里加一行代码：

public function mount()
{
    $this->jobs = collect($this->jobs)->map(function ($job) {
        return [
            'ownerName' => $job->owner->name,
            'title' => $job->title,
            'id' => $job->id,
            'location' => $job->location
        ];
    });

    // 初始选中第一个职位
    if ($this->jobs->isNotEmpty()) {
        $this->viewedJob = Job::find($this->jobs->first()['id']);
    }
}

为什么这些修改能解决问题？ #

• wire:key是Livewire列表渲染的核心，没有它，Livewire无法追踪列表项的变化，就算viewedJob更新了，视图也不会正确更新样式。
• 空值判断避免了初始加载时的错误，保证页面能正常渲染并响应后续的点击事件。
• 初始选中逻辑让用户打开页面就有一个明确的选中状态，体验更流畅。

现在你再试试点击职位，高亮应该就能正常生效了！

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