当使用 parent 和 child foreach 循环添加新数组时，在 child foreach 循环中保留选中的复选框 - Laravel livewire

Question

我们有一个表单，允许管理员从下拉菜单中 select 一个角色，然后显示与该角色关联的用户，可以 selected。同时，您可以在同一个表单中添加多个角色。

当您添加另一个角色时，在先前角色列表中 selected 的用户会消失并失去 selected 的用户。

我们认为我们需要在 Livewire 组件的 updatedSelectedRole 方法中做一些事情，但我们不确定是什么。添加另一个角色时，$roleSelectedUserList 将 re-rendered 变为一个空数组。

Livewire 组件

namespace App\Http\Livewire\Admin;

use App\Models\Role;
use App\Models\User;
use Livewire\Component;

class Create extends Component
{
    public $roleSelectedUserList = [];
    public $selected_role_user = [];
    public $selected_role = [];
    public $rolesList = [];
    public $roles = [];

    public function updatedSelectedRole($name, $value)
    {
        $this->roleSelectedUserList = User::join('role_user', 'users.id', '=', 'role_user.user_id')
            ->select('users.*')
            ->where('role_user.role_id', $name)
            ->get();
    }

    public function addDataColumn()
    {
        $this->roleSelectedUserList = [];
        $this->selected_role_user = [];
        $this->roles[] = [[]];
    }

    public function mount()
    {
        $this->rolesList = Role::pluck('name', 'id');
        $this->roles = [[]];
    }

    public function render()
    {
        return view('livewire.users.create');
    }
}

Blade 文件

<div class="row">
   <div class="col-md-12">
      @foreach($roles as $index => $role)
          <div class="form-group row mb-0" wire:key="div-{{ $loop->index }}">
             <div class="col-lg-12">
                <div class="form-group row">
                  <div class="col-md-6">
                     <div class="form-group">
                         <label for="type">Roles *</label>
                         <select class="form-control form-control-lg form-control-solid"  wire:model="selected_role.{{$index}}" id="selected_role.{{$index}}" name="selected_role.{{$index}}">
                            @foreach($rolesList as $key => $role)
                               <option value="{{ $key }}">{{ $role }}</option>
                            @endforeach
                         </select>
                      </div>
                   </div>
                   <div class="col-md-4">
                       <div class="">
                          <div class="form-group">
                              @foreach($roleSelectedUserList as $user)
                                   <input wire:model="selected_role_user.{{$user->id}}" type="checkbox" id="selected_role_user.{{$user->id}}" name="selected_role_user.{{$user->id}}"/>                                         
                                   {{$user->first_name}}                                   
                              @endforeach
                           </div>
                        </div>
                     </div>
                  </div>
              </div>
           </div>
           @endforeach
           <div class="form-group row">
              <div class="col-lg-4">
                 <button wire:click.prevent="addDataColumn" type="button" class="btn btn-primary btn-sm font-weight-bolder mt-lg-0 mt-20">
                      <i class="la la-plus"></i>{!! trans('global.button.add') !!}
                 </button>
              </div>
           </div>
        </div>
   </div>

Answer 1

您可以更改代码如下：

<div class="row">
    <div class="col-md-12">
        @foreach($roles as $index => $role)
        <div class="form-group row mb-0" wire:key="div-{{ $loop->index }}">
            <div class="col-lg-12">
                <div class="form-group row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="type">Roles *</label>
                            <select class="form-control form-control-lg form-control-solid"
                                wire:model="selected_role.{{$index}}" id="selected_role.{{$index}}"
                                name="selected_role.{{$index}}">
                                @foreach($rolesList as $key => $role)
                                <option value="{{ $index }},{{ $key }}">{{ $role }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="">

                            <div class="form-group">
                                @isset($roleSelectedUserList[$index])
                                @foreach($roleSelectedUserList[$index] as $user)
                                <input wire:model="selected_role_user.{{$index}}" type="checkbox"
                                    value="{{$user['id'] }}" />
                                {{$user['first_name']}}{{$index}}
                                @endforeach
                                @endisset
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
        <div class="form-group row">
            <div class="col-lg-4">
                <button wire:click.prevent="addDataColumn" type="button"
                    class="btn btn-primary btn-sm font-weight-bolder mt-lg-0 mt-20">
                    <i class="la la-plus"></i>{!! trans('global.button.add') !!}
                </button>
            </div>
        </div>
    </div>
</div>

    public $roleSelectedUserList = [];
    public $selected_role_user = [];
    public $selected_role = [];
    public $rolesList = [];
    public $roles = [];

    public function updatedSelectedRole($value)
    {
        $arryValue = explode(",", $value);
        $index = $arryValue[0];
        $id = $arryValue[1];
 
        $this->roleSelectedUserList[$index] = User::join('role_user', 'users.id', '=', 'role_user.user_id')
            ->select('users.*')
            ->where('role_user.role_id', $id)
            ->get();

        $this->selected_role_user[$index] = [];
    }

    public function addDataColumn()
    {
        $this->roles[] = [[]];

        $this->selected_role[] = [];
        $this->selected_role_user[] = [];
    }

    public function mount()
    {
        $this->rolesList = Role::pluck('name', 'id');
         
        $this->roles[] = [];
         
        $this->selected_role_user[] = [];
        $this->selected_role[] = [];
    }

    public function render()
    {
        return view('livewire.users.create');
    }