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

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

IlluminateContractsContainerBindingResolutionException Unable to resolve dependency [Parameter #1 [ $ate ]] in class AppHttpLivewireClassroomBabyStatus

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.

AppHttpLivewireBaby.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();
    }
}

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