预选的 Livewire 复选框不起作用

Question

我有 permission_types 的集合，我可以在我的视图中访问这些集合。我正在循环 permission_types 以在复选框中显示每个。所有复选框都绑定到 permission_resource，它被定义为 public 属性数组。 我希望预选所有复选框，我为此使用了 checked 属性，但是一旦我删除 wire:model 来自输入的属性，所有复选框都被预选。这将问题缩小到 wire:model 绑定。

我想要达到的目标：

我只想预选绑定到 public 属性 $permission_resource 的复选框。谁能帮帮我。我真的不知道我在这里做错了什么。感谢任何提前解决此问题的努力。

相关组件代码：

public $permission_types;
public $permission_resource = [];

public function render()
{
    $this->permission_types = PermissionType::all();
            
    // dd($this->permission_types->toArray());
            
    return view('livewire.permissions.create-permission-component')
            ->extends('layouts.app')
            ->section('content');
}

相关查看代码：

<div class="row">
    @foreach($this->permission_types as $permissionType)
        <div class="col-md-3">
             <input wire:model="permission_resource" type="checkbox" class="filled-in chk-col-green form-control" id="{{$permissionType['name']}}" value="{{ $permissionType['name'] }}" checked />
            <label for="{{ $permissionType['name'] }}" class="p-r-30">{{ ucfirst($permissionType['name']) }} Resource</label>
        </div>
    @endforeach
</div>

权限类型转储

到目前为止我已经尝试过：

到目前为止，我已经尝试跟随，但 none 对我有用。

1: 定义 public $permission_resource; 而不是 public $permission_resource = [ ];

2：wire:model="permission_resource.{{$permissionType["id"]}}"

3：wire:model="permission_resource.{{$permissionType["name"]}}"

4：wire:model.defer="permission_resource.{{$permissionType["id"]}}"

5: wire:model.defer="permission_resource.{{$permissionType["name"]}}"

6: name="permission_resource.{{$permissionType["id"]}}"

Answer 1

您将所有输入绑定到同一个（数组）变量，您要做的是将每个输入绑定到该数组中的一个元素，而不是数组本身。

因此您需要预填充该数组，然后使用 $loop->index.

绑定每个输入

不确定在 render 方法中填充 permission_types 是否有充分的理由，如果它不是高度动态的（可能从渲染到渲染），在 mount 中更好).

在 mount 中填充 permission_resource 可能如下所示：

    public function mount() {
        $this->permission_types = PermissionType::all();
        $this->permission_resource = $this->permission_types->pluck('name');
    }

然后在 blade 中，绑定到数组的元素，并且不要自己设置 checked，wire:model 无论如何都会覆盖它，如果需要的话请选中您的复选框你必须绑定到是真实的，并且取消检查绑定的 var 是否是错误的（这就是为什么使用 wire:model 将它们绑定到数组时没有为你检查所有内容，因为 empty($array) == false，如果你只是修复外壳permission_type 在 blade 你会发现当你勾选一个时，复选框都会出现，因为它们都绑定到同一个东西。

<input wire:model="permission_resource.{{$loop->index}}" type="checkbox" class="filled-in chk-col-green form-control" id="{{$permission_type['name']}}" value="{{$permission_type['name']}}" />

PS：这至少会达到你想要的，这取决于你最终想用 permission_resource 做什么，它可能不是一个非常 good/useful 的表示目的。

Answer 2

试试这个

public $permission = [];

protected $rules = [
    ...
    'permission' => 'required|array',
];


public function create()
{


    if ($this->validate()) {
        $data = [
                'name' => $this->name,
                ....
        ];
        $model = Model::create($data);

        if (!empty($this->permission)) {
            $permissionId = PermissionType::whereIn('id', $this->permission)->pluck('id');
            $model->permission()->attach($permissionId); // add name relation instead 'permission' , of create 'attach' of update 'sync'
        }

    }

}


public function render()
{

    return view('livewire.permissions.create-permission-component', [
        'permissions' => PermissionType::select('id', 'name')->get()
    ])
        ->extends('layouts.app')
        ->section('content');
}

在视图中

<div class="row">
   @foreach($permissions as $permission)
      <div class="col-md-3">
         <input wire:model.defer="permission" wire:key="permission{{$permission->id}}" type="checkbox" value="{{$permission->id}}" class="filled-in chk-col-green form-control" />
         <label for="{{ $permission->name }}" class="p-r-30">{{ ucfirst($permission->name) }} Resource</label>
      </div>
   @endforeach
</div>

预选的 Livewire 复选框不起作用

Livewire checkbox preselected not working

laravel-livewire