Laravel Livewire：意外行为，视图没有收到更新的数据

Question

希望你今天过得愉快。

所以我有一个由jobs 和viewedJob 属性组成的livewire 组件，jobs 是与viewedJob 以某种方式相关的所有作业的数组。

我的目标

是在viewedJob列表中高亮当前job。

所以在我的前端代码中我有这个逻辑

    <aside
        class="text-gray-700 text-md  w-auto sm:w-auto md:w-3/12 lg:w-2/12 xl:w-2/12  rounded-md mx-4">
        <ul>
            @foreach($jobs as $job)
                <li :key="$loop->index" 
                   class="@if($viewedJob->id == $job['id']) border border-primary @endif my-1 w-full bg-white p-3 rounded-md @if(!$loop->first) my-3 @endif">
                    <main class="flex w-full items-center justify-between">
                        <div class="flex items-center justify-between">
                            <button wire:click="viewJob({{$job['id']}})" class="truncate focus:outline-none">
                                {{$job['title']}}
                            </button>
                        </div>
                    </main>

            @endforeach
        </ul>
    </aside>

注意这一点

@if($viewedJob->id == $job['id']) 
border border-primary
@endif

这应该突出显示当前 viewedJob 等于的 div。

这就是我更新我的财产的方式

<button wire:click="viewJob({{$job['id']}})" class="truncate focus:outline-none">
         {{$job['title']}}
</button>

我的 livewire 组件看起来像这样

class JobsIndex extends Component
{
    public $viewedJob;
    public $jobs;

    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
            ];
        });
    }

    public function viewJob($jobId) {
        $this->viewedJob = Job::find($jobId);
    }

    public function render()
    {
        return view('livewire.jobs-index');
    }
}

这就是我更新viewedJob 属性的方式

    public function viewJob($jobId) {
        $this->viewedJob = Job::find($jobId);
    }

这是应用程序的当前行为。

任何帮助将不胜感激，感谢您的宝贵时间。

Answer 1

我建议让你的课堂条件尽可能简单。

class="{{ ($viewedJob->id == $job['id']) ? 'border border-primary'' : '' }}my-1 w-full bg-white p-3 rounded-md {{ (!$loop->first) ? 'my-3' : '' }}"