在 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

    // 假设你从数据库加载了所有Atelier供选择
    public $ateliers;

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

    public function saveGebruiker()
    {
        // 验证输入数据（此处省略，实际应用中应添加）
        $this->validate([
            'gebruiker.first' => 'required|string|max:255',
            'gebruiker.last' => 'required|string|max:255',
            'selectedAtelier' => 'array',
        ]);

        // 创建新的Gebruiker
        $nieuwegebruiker = Gebruiker::create([
            'first' => $this->gebruiker['first'],
            'last' => $this->gebruiker['last'],
        ]);

        // 同步选中的Atelier，这将自动处理关联表的插入
        $nieuwegebruiker->ateliers()->sync($this->selectedAtelier);

        // 重置表单或进行其他操作
        $this->reset(['gebruiker', 'selectedAtelier']);
        session()->flash('message', 'Gebruiker successfully created.');
    }

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

<div>
    <form wire:submit.prevent="saveGebruiker">
        <label for="first">First Name:</label>
        <input type="text" id="first" wire:model="gebruiker.first">
        @error('gebruiker.first') <span class="error">{{ $message }}</span> @enderror

        <label for="last">Last Name:</label>
        <input type="text" id="last" wire:model="gebruiker.last">
        @error('gebruiker.last') <span class="error">{{ $message }}</span> @enderror

        <h3>Select Ateliers:</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
        @error('selectedAtelier') <span class="error">{{ $message }}</span> @enderror

        <button type="submit">Save Gebruiker</button>
    </form>

    @if (session()->has('message'))
        <div class="alert alert-success">
            {{ session('message') }}
        </div>
    @endif
</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; // 所有可用的Atelier

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

        // 加载当前Gebruiker已关联的Atelier ID，并将其转换为字符串数组
        // Livewire的wire:model通常将复选框值作为字符串处理，
        // 确保类型一致性可以避免in_array()比较问题。
        $this->selectedAtelier = $this->gebruiker->ateliers()
                                    ->pluck('id')
                                    ->map(fn($id) => strval($id))
                                    ->toArray();
    }

    public function updateGebruiker()
    {
        // 验证输入数据
        $this->validate([
            'gebruiker.first' => 'required|string|max:255',
            'gebruiker.last' => 'required|string|max:255',
            'selectedAtelier' => 'array',
        ]);

        // 更新Gebruiker基本信息
        $this->gebruiker->save();

        // 同步选中的Atelier
        $this->gebruiker->ateliers()->sync($this->selectedAtelier);

        session()->flash('message', 'Gebruiker successfully updated.');
    }

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

<div>
    <form wire:submit.prevent="updateGebruiker">
        <label for="first">First Name:</label>
        <input type="text" id="first" wire:model="gebruiker.first">
        @error('gebruiker.first') <span class="error">{{ $message }}</span> @enderror

        <label for="last">Last Name:</label>
        <input type="text" id="last" wire:model="gebruiker.last">
        @error('gebruiker.last') <span class="error">{{ $message }}</span> @enderror

        <h3>Select Ateliers:</h3>
        @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
        @error('selectedAtelier') <span class="error">{{ $message }}</span> @enderror

        <button type="submit">Update Gebruiker</button>
    </form>

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