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',
        ],
    ];

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

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() {}

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() {}

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) {}

$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.

Comments

[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 }}" 

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

[Daniel nix]

Hi,
should'nt it be

public function updatedProducts($value, $key) {} 

?