Laravel Livewire 多对多关系编辑表单中复选框的预选实现

<?php

namespace App\Livewire;

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

class GebruikerForm extends Component
{
    public $gebruiker = [
        'first' => '',
        'last' => '',
    ];
    public $selectedAtelier = []; // 用于存储选中的 Atelier ID

    public function saveGebruiker()
    {
        $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()
    {
        // 假设 $ateliers 是从数据库中获取的所有工作坊
        $ateliers = \App\Models\Atelier::all(); 
        return view('livewire.gebruiker-form', compact('ateliers'));
    }
}

<div>
    @if (session()->has('message'))
        <div style="color: green;">{{ session('message') }}</div>
    @endif

    <label for="first">名:</label>
    <input type="text" id="first" wire:model="gebruiker.first" placeholder="名">
    <br>

    <label for="last">姓:</label>
    <input type="text" id="last" wire:model="gebruiker.last" placeholder="姓">
    <br><br>

    <h3>选择工作坊:</h3>
    @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
    <br>

    <button wire:click="saveGebruiker">保存用户</button>
</div>

<?php

namespace App\Livewire;

use App\Models\Gebruiker; // 确保引入 Gebruiker 模型
use App\Models\Atelier;   // 确保引入 Atelier 模型
use Livewire\Component;

class GebruikerEditForm extends Component
{
    public Gebruiker $gebruiker; // 通过路由模型绑定注入 Gebruiker 实例
    public $selectedAtelier = []; // 用于存储选中的 Atelier ID
    public $ateliers;             // 用于在 Blade 中循环显示所有工作坊

    public function mount(Gebruiker $gebruiker)
    {
        $this->gebruiker = $gebruiker;

        // 从当前用户已关联的工作坊中获取所有ID
        // 注意：使用 map(strval) 将ID转换为字符串，以确保与 wire:model 的行为一致
        $this->selectedAtelier = $this->gebruiker->ateliers()
                                    ->pluck('id')
                                    ->map(fn($id) => strval($id)) // 转换为字符串
                                    ->toArray();

        // 获取所有可供选择的工作坊
        $this->ateliers = Atelier::all();
    }

    public function updateGebruiker()
    {
        // 更新 Gebruiker 的基本信息
        $this->gebruiker->update([
            'first' => $this->gebruiker['first'],
            '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 style="color: green;">{{ session('message') }}</div>
    @endif

    <label for="first">名:</label>
    <input type="text" id="first" wire:model="gebruiker.first" placeholder="名">
    <br>

    <label for="last">姓:</label>
    <input type="text" id="last" wire:model="gebruiker.last" placeholder="姓">
    <br><br>

    <h3>编辑工作坊:</h3>
    @foreach ($ateliers as $atelier)
        <input wire:model="selectedAtelier"
               value="{{ $atelier->id }}"
               type="checkbox"
               id="atelier-{{ $atelier->id }}"
               @if(in_array($atelier->id, $selectedAtelier)) checked @endif {{-- 核心预选逻辑 --}}
               wire:key="atelier-checkbox-{{ $atelier->id }}"> {{-- 推荐添加 wire:key --}}
        <label for="atelier-{{ $atelier->id }}">{{ $atelier->name }}</label><br>
    @endforeach
    <br>

    <button wire:click="updateGebruiker">更新用户</button>
</div>