DEV Community

Cover image for Accessing updated index in Livewire
Zack Webster
Zack Webster

Posted on • Updated on

Accessing updated index in Livewire

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.

Top comments (2)

Collapse
 
radeey profile image
Rafael den Heijer

I took this post as a starting point, but using the updated...() trigger did not work for me. So I came up with the following:

wire:model.lazy="dossiers.{{ $index }}" 
Enter fullscreen mode Exit fullscreen mode

That works like a charm without any other events or clicks registered.

Collapse
 
nxd4n profile image
Daniel nix • Edited

Hi,
should'nt it be

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

?