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.
Top comments (2)
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:
That works like a charm without any other events or clicks registered.
Hi,
should'nt it be
?