在Laravel Livewire中处理多对多关系并预选编辑表单中的复选框

<?php

namespace App\Http\Livewire;

use App\Models\Gebruiker;
use App\Models\Atelier;
use Livewire\Component;

class GebruikerForm extends Component
{
    public $gebruiker = [
        'first' => '',
        'last' => '',
    ];
    public $selectedAtelier = []; // 用于存储选中的Atelier ID
    public $ateliers; // 用于在Blade中循环显示所有Atelier

    public function mount()
    {
        $this->ateliers = Atelier::all();
    }

    public function saveGebruiker()
    {
        $this->validate([
            'gebruiker.first' => 'required|string|max:255',
            'gebruiker.last' => 'required|string|max:255',
        ]);

        $nieuwegebruiker = Gebruiker::create([
            'first' => $this->gebruiker['first'],
            'last' => $this->gebruiker['last'],
        ]);

        // 将选中的Atelier ID同步到多对多关系中
        $nieuwegebruiker->ateliers()->sync($this->selectedAtelier);

        session()->flash('message', '用户创建成功！');
        $this->reset(['gebruiker', 'selectedAtelier']); // 重置表单
    }

    public function render()
    {
        return view('livewire.gebruiker-form');
    }
}

<div>
    @if (session()->has('message'))
        <div class="alert alert-success">{{ session('message') }}</div>
    @endif

    <form wire:submit.prevent="saveGebruiker">
        <label for="first_name">名:</label>
        <input type="text" id="first_name" wire:model="gebruiker.first" class="form-control">

        <label for="last_name">姓:</label>
        <input type="text" id="last_name" wire:model="gebruiker.last" class="form-control">

        <fieldset>
            <legend>选择工作坊:</legend>
            @foreach ($ateliers as $atelier)
                <input wire:model="selectedAtelier" value="{{ $atelier->id }}"
                       type="checkbox"
                       id="atelier-{{ $atelier->id }}">
                <label for="atelier-{{ $atelier->id }}">{{ $atelier->name }}</label><br>
            @endforeach
        </fieldset>

        <button type="submit" class="btn btn-primary">保存用户</button>
    </form>
</div>

<?php

namespace App\Http\Livewire;

use App\Models\Gebruiker;
use App\Models\Atelier;
use Livewire\Component;

class GebruikerEditForm extends Component
{
    public Gebruiker $gebruiker; // 注入要编辑的Gebruiker实例
    public $selectedAtelier = []; // 用于存储和显示选中的Atelier ID
    public $ateliers; // 用于在Blade中循环显示所有Atelier

    // Livewire组件的mount方法，用于初始化属性
    public function mount(Gebruiker $gebruiker)
    {
        $this->gebruiker = $gebruiker;
        $this->ateliers = Atelier::all();

        // 加载当前用户已关联的Atelier ID，并将其转换为字符串数组
        // pluck('id') 获取所有关联Atelier的ID
        // map(fn($id) => strval($id)) 确保ID转换为字符串，因为wire:model有时会将复选框的值作为字符串处理
        // toArray() 将集合转换为数组
        $this->selectedAtelier = $this->gebruiker->ateliers()
                                    ->pluck('id')
                                    ->map(fn($id) => strval($id))
                                    ->toArray();

        // 也可以直接将用户数据绑定到gebruiker属性，如果gebruiker是数组形式
        // $this->gebruiker = $gebruiker->toArray(); // 如果gebruiker属性是一个数组
    }

    public function updateGebruiker()
    {
        $this->validate([
            'gebruiker.first' => 'required|string|max:255',
            'gebruiker.last' => 'required|string|max:255',
        ]);

        $this->gebruiker->update([
            'first' => $this->gebruiker->first, // 直接访问属性，如果gebruiker是模型实例
            'last' => $this->gebruiker->last,
        ]);

        // 同步更新多对多关系
        $this->gebruiker->ateliers()->sync($this->selectedAtelier);

        session()->flash('message', '用户更新成功！');
        // 可选：重定向或刷新页面
    }

    public function render()
    {
        return view('livewire.gebruiker-edit-form');
    }
}

<div>
    @if (session()->has('message'))
        <div class="alert alert-success">{{ session('message') }}</div>
    @endif

    <form wire:submit.prevent="updateGebruiker">
        <label for="first_name_edit">名:</label>
        <input type="text" id="first_name_edit" wire:model="gebruiker.first" class="form-control">

        <label for="last_name_edit">姓:</label>
        <input type="text" id="last_name_edit" wire:model="gebruiker.last" class="form-control">

        <fieldset>
            <legend>选择工作坊:</legend>
            @foreach ($ateliers as $atelier)
                <input wire:model="selectedAtelier"
                       value="{{ $atelier->id }}"
                       type="checkbox"
                       id="atelier-{{ $atelier->id }}"
                       @if(in_array(strval($atelier->id), $selectedAtelier)) checked @endif
                       wire:key="atelier-checkbox-{{ $atelier->id }}">
                <label for="atelier-{{ $atelier->id }}">{{ $atelier->name }}</label><br>
            @endforeach
        </fieldset>

        <button type="submit" class="btn btn-primary">更新用户</button>
    </form>
</div>