在 Livewire 中单击之前如何防止使用参数

Question

此代码是与 Livewire 组件连接的视图文件的一部分。

如何防止在单击按钮之前使用参数？

查看

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

组件

public function setAte($baby, $ate)
{
    $baby['ate'] = $ate;
    $selectedBaby = Baby::find($baby['id']);
    $selectedBaby->save();
}

错误

Illuminate\Contracts\Container\BindingResolutionException 无法解析 App\Http\Livewire\Classroom\BabyStatus 类中的依赖项 [Parameter #1 [ $ate ]]

解决方案 1

//组件

public $baby;

protected $rules = [
    'baby.ate' => 'required|int|min:0|max:2'
];

public function updateAte($ate)
{
    $this->baby->ate = $ate;
    $this->baby->save();
}

//查看

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

就是这样，谢谢@Unflux。

Answer 1

我倾向于重构你所拥有的并将每个baby 单独设为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();
    }
}

资源\视图\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>

注意：以上使用===。防止 null 或类似值被错误地确定为等于 0。

然后在你的view:

@foreach($babies as $baby)
  @livewire("baby", ["baby" => $baby]) // render your single baby component
@endforeach