hope you’re having a good day.
so i have a livewire components that consists of jobs
and a viewedJob
attribute, jobs
is an array of all the jobs that are related to viewedJob
in some way.
My Goal
is to highlight the current job
in the list that is viewedJob
.
so in my front-end code i have this logic
<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>
notice this
@if($viewedJob->id == $job['id'])
border border-primary
@endif
this should highlight the div that is currently viewedJob
is equal to.
and this is how i update my property
<button wire:click="viewJob({{$job['id']}})" class="truncate focus:outline-none">
{{$job['title']}}
</button>
and my livewire component looks like this
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');
}
}
this is how i update the viewedJob
property
public function viewJob($jobId) {
$this->viewedJob = Job::find($jobId);
}
this is the current behaviour of the application.
any help would be appreciated, thank you for your time.