Laravel Livewire: unexpeced behaviour, view dose not recieve updated data

#1

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.

enter image description here

any help would be appreciated, thank you for your time.

1 Like
#2

You don’t have a closing </li> tag

#3

i have a closed li tag but when i deleted it for the sake of being a simple question, i deleted the tag

#4

You can’t really expect help if you randomly delete lines?

#5

Try

<li :key="{{ $loop->index }}"
#6

so sorry, i tried to make the question a simple and less noisy as possible, thanks for your Note.

#7

And did the suggested fix work? At the moment every li has the same '$loop->index' string because you did not wrap it in blade echo tags. You should see this if you check the browser source.

#8

unfortunately, no still the same behavior