深入理解Laravel Livewire中复选框的wire:model行为

<div class="row">
    <div class="form-check form-switch col-6 pl-2">
        <input class="form-check-input" type="checkbox" wire:model="role.Gestion" id="gest"
        @if($gestion)
            checked
        @endif>
        <label class="form-check-label" for="gest">Gestión</label>
    </div>
    {{-- ... 类似的复选框 ... --}}
</div>

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;

class RolePermissions extends Component
{
    public Role $role; // 假设通过路由参数或父组件传入角色
    public bool $gestion = false;
    public bool $consultas = false;
    public bool $administrarPerfiles = false;
    public bool $administrarUsuarios = false;

    // 在组件挂载时初始化复选框状态
    public function mount(Role $role)
    {
        $this->role = $role;
        $this->gestion = $role->hasPermissionTo('gestionar');
        $this->consultas = $role->hasPermissionTo('consultar');
        $this->administrarPerfiles = $role->hasPermissionTo('administrarPerfiles');
        $this->administrarUsuarios = $role->hasPermissionTo('administrarUsuarios');
    }

    // 当复选框状态改变时，可以实现相应的保存逻辑
    public function updated($propertyName)
    {
        // 示例：当'gestion'属性更新时，同步到角色权限
        if ($propertyName === 'gestion') {
            if ($this->gestion) {
                $this->role->givePermissionTo('gestionar');
            } else {
                $this->role->revokePermissionTo('gestionar');
            }
        }
        // ... 其他权限的更新逻辑 ...

        $this->role->save(); // 保存角色权限的更改
        session()->flash('message', '权限已更新！');
    }

    public function render()
    {
        return view('livewire.role-permissions');
    }
}

<div class="row">
    <div class="form-check form-switch col-6 pl-2">
        <input class="form-check-input" type="checkbox" wire:model="gestion" id="gest">
        <label class="form-check-label" for="gest">管理</label>
    </div>
    <div class="form-check form-switch col-6">
        <input class="form-check-input" type="checkbox" wire:model="consultas" id="cons">
        <label class="form-check-label" for="cons">查询</label>
    </div>
    <div class="form-check form-switch col-6">
        <input class="form-check-input" type="checkbox" wire:model="administrarPerfiles" id="adPe">
        <label class="form-check-label" for="adPe">管理档案</label>
    </div>
    <div class="form-check form-switch col-6">
        <input class="form-check-input" type="checkbox" wire:model="administrarUsuarios" id="adUs">
        <label class="form-check-label" for="adUs">管理用户</label>
    </div>
</div>