DEV Community

loading...
Cover image for Accessing updated index in Livewire

Accessing updated index in Livewire

zaxwebs profile image Zack Webster Updated on ・2 min read

I recently got started with Livewire and I'm in absolute awe. It makes creating dynamic interfaces so easy while sticking to the familiarity of Laravel. Okay, enough praising for now.

I'm writing this article to highlight a slight niche and currently undocumented feature.

The Scenario

Okay, consider this: In your component class, you have an array:

public $products= [
        [
            'id' => '2535230536',
            'rate' => '32424',
        ],
        [
            'id' => '3960700133',
            'rate' => '24523',
        ],
        [
            'id' => '0524548004',
            'rate' => '45574',
        ],
    ];
Enter fullscreen mode Exit fullscreen mode

And in the view, you have the 'id's & 'rates's bound to inputs.

@foreach($products as $index => $product)
<div  wire:key="products-{{ $index }}">
    <div>
        <label>ID</label>
    <input type="text" wire:model="products.{{ $index }}.id">
    </div>
    <div>
        <label>Rate</label>
        <input type="text" wire:model="products.{{ $index }}.rate">
    </div>
</div>
@endforeach
Enter fullscreen mode Exit fullscreen mode

Now, what if you want to hook a task any time a product ID is updated? Something like if ID was updated, update the rate accordingly.

The Concerns

Let's see... Doing something like:

public function updatedRooms() {}
Enter fullscreen mode Exit fullscreen mode

This runs every time $rooms gets updated. But we want to run as task when any 'id' gets updated not $rooms as a whole.

public function updatedRooms0Id() {}
Enter fullscreen mode Exit fullscreen mode

This runs every time $rooms[0]['id'] gets updated. Which works for the first 'id' but... having to repeat the function (updatedRooms0Id, updatedRooms1Id...) for every index isn't really DRY.

The Solution

Wouldn't it be great if only there was a way to access the index? Turns out there is...

public function updatedRooms($value, $key) {}
Enter fullscreen mode Exit fullscreen mode

$key in our example would return 0.id if the first ID was updated. The first part before the dot is our index. Which is what we needed! You can now operate on the key to setup tasks you'd like to with something like an if statement.

That's All Folks!

And before I go, I'd like to thank Josh Hanley for helping me with this solution. I hope this article helps many more out there.

Discussion (0)

Forem Open with the Forem app