php - 当使用父子 foreach 循环添加新数组时,在子 foreach 循环中保留选中的复选框 - Laravel livewire
问题描述
我们有一个表单,允许管理员从下拉菜单中选择一个角色,然后显示与该角色关联的用户,这些用户可以选择。同时,您可以在同一个表单中添加多个角色。
当您添加另一个角色时,在之前的角色列表中选择的用户会消失并失去选择的用户。
我们认为我们需要updatedSelectedRole
在 Livewire 组件的方法中做一些事情,但我们不确定是什么。添加另一个角色时,它$roleSelectedUserList
会重新呈现为空数组。
活线组件
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');
}
}
刀片文件
<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>
解决方案
您可以更改代码如下:
<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');
}
推荐阅读
- wpf - 离开页面时如何销毁页面上的所有数据
- ruby - Sidekiq drain 还执行通过 perform_in 排队的新作业
- java - 用于检查 JSON 字段值的 Hamcrest 匹配器是空还是空?
- php - 错误:调用未定义的函数 curl_version() PHP Stripe
- javascript - 将具有两个元素的数组转换为具有一个 k/v-pair 的 JS 对象
- android - 我如何通过一个意图共享纯文本和另一个文件(如 excel 文件)
- r - R - 在使用调查包时制作 ggplot
- xml - PowerShell - XML - 处理具有和不具有属性的节点
- java - 前台服务一段时间后关闭
- python - 如何使用 Python 分析 SQL 查询?