How to prevent using a parameter when before clicked in Livewire - laravel

Question

This code is a part of the View file connected with the Livewire component.
How to prevent using a parameter when before a button clicked?
View
...
#foreach ($babies as $baby)
...
<div
class="flex justify-between w-11-12 py-1 mb-1 ml-2 leading-6 text-sm font-medium ext-left text-white uppercase transition rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none">
<button wire:click="setAte({{ $baby, $ate = 0 }})"
class="flex w-1-3 mr-1 px-2 text-xs font-medium text-center text-white uppercase transition rounded shadow ripple hover:shadow-lg hover:bg-pink-800 focus:ring-ring-600 {{ $baby['ate'] == 0 ? "bg-blue-500" : "bg-red-500" }}">
S</button>
<button wire:click="setAte({{ $baby, $ate = 1 }})"
class="flex w-1-3 mr-1 px-2 text-xs font-medium text-center text-white uppercase transition rounded shadow ripple hover:shadow-lg hover:bg-pink-800 focus:ring-pink-600 {{ $baby['ate'] == 1 ? "bg-blue-500" : "bg-red-500"}}">
M</button>
<button wire:click="setAte({{ $baby, $ate = 2}})"
class="flex w-1-3 px-2 text-xs font-medium text-center text-white uppercase transition rounded shadow ripple hover:shadow-lg hover:bg-pink-800 focus:ring-pink-600 {{ $baby['ate'] == 2 ? "bg-blue-500" : "bg-red-500" }}">
L</button>
<div>{{ $baby['ate'] }}</div> {{-- <---check code --}}
</div>
#endforeach
...
Component
public function setAte($baby, $ate)
{
$baby['ate'] = $ate;
$selectedBaby = Baby::find($baby['id']);
$selectedBaby->save();
}
Error
Illuminate\Contracts\Container\BindingResolutionException
Unable to resolve dependency [Parameter #1 [ $ate ]] in class App\Http\Livewire\Classroom\BabyStatus
Solution 1
//Component
public $baby;
protected $rules = [
'baby.ate' => 'required|int|min:0|max:2'
];
public function updateAte($ate)
{
$this->baby->ate = $ate;
$this->baby->save();
}
//View
<button wire:model="baby" wire:click="updateAte(0)"
class="flex w-1-3 mr-1 px-2 text-xs font-medium text-center text-white uppercase transition rounded shadow ripple hover:shadow-lg hover:bg-pink-800 focus:ring-ring-600 {{ $baby['ate'] == 0 ? "bg-blue-500" : "bg-red-500"}}">S</button>
<button wire:model="baby" wire:click="updateAte(1)"
class="flex w-1-3 mr-1 px-2 text-xs font-medium text-center text-white uppercase transition rounded shadow ripple hover:shadow-lg hover:bg-pink-800 focus:ring-pink-600 {{ $baby['ate'] == 1 ? "bg-blue-500" : "bg-red-500"}}">M</button>
<button wire:model="baby" wire:click="updateAte(2)"
class="flex w-1-3 px-2 text-xs font-medium text-center text-white uppercase transition rounded shadow ripple hover:shadow-lg hover:bg-pink-800 focus:ring-pink-600 {{ $baby['ate'] == 2 ? "bg-blue-500" : "bg-red-500" }}">L</button>
That's all, thank you #Unflux.

Answer 1

I would be inclined to refactor what you have and make each baby a separate livewire component.
App\Http\Livewire\Baby.php
class Baby extends Component
{
// your instance of a baby
public $baby;
// required to allow updating of the baby properties
protected $rules = [
'baby.ate' => 'required|int|min:0|max:2'
];
public function render()
{
return view('livewire.baby');
}
// you can set the value of properties here if you want
public function mount()
{
// for example:
//$this->baby->ate = -100;
}
// when the value of ate is updated from the view
// update the baby model
public function updatedBaby()
{
$this->baby->save();
}
}
resoures\views\livewire\baby.blade.php
<div class="p-4 m-4">
<h4>Baby Component - ate: {{ $baby->ate }}</h4>
<div class="flex justify-between p-4 m-4">
<button wire:click="$set('baby.ate', 0)"
class="text-white px-2 rounded {{ $baby->ate === 0 ? "bg-blue-500" : "bg-red-500" }}">S
</button>
<button wire:click="$set('baby.ate', 1)"
class="text-white px-2 rounded {{ $baby->ate === 1 ? "bg-blue-500" : "bg-red-500" }}">M
</button>
<button wire:click="$set('baby.ate', 2)"
class="text-white px-2 rounded {{ $baby->ate === 2 ? "bg-blue-500" : "bg-red-500" }}">L
</button>
</div>
</div>
Note: The use of === in the above. Prevents null or similar values being incorrectly determined as equal to 0.
Then in your view:
#foreach($babies as $baby)
#livewire("baby", ["baby" => $baby]) // render your single baby component
#endforeach