Để sử dụng được select option multiple trong Laravel + Livewire 3, thì chúng ta trước nhất phải cài đặt thư viện của Livewire 3
composer require livewire/livewireSau khi cài đặt xong anh em nhớ cấu hình các cài đặt kèm theo như add(js,css)
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>Ok, Nếu mọi thứ ok và ổn, ta cứ việc tạo component livewire như sau
php artisan make:livewire RolePermissionChúng ta sẽ được một cấu hình các file như sau, ta hãy cấu hình chức năng chọn Role, cho nó hiện thị các Permission trong Role đó ra. đơn giản vậy thôi á
App\Livewire\RolePermission.php
<?php
namespace App\Livewire;
use Illuminate\Support\Facades\Log;
use Livewire\Component;
use Spatie\Permission\Models\Role;
class RolePermission extends Component
{
public $roles;
public $roleId="";
public $permissions = [];
public function mount()
{
$this->roles = Role::all();
}
public function updatedRoleId()
{
Log::info("Role id:".json_encode($this->roleId));
if ($this->roleId!="") {
Log::info("Chọn role: " . $this->roleId);
$role = Role::find($this->roleId);
$this->permissions = $role ? $role->permissions : [];
}
}
public function render()
{
return view('livewire.role-permission');
}
}
Chúng cần cấu hình các biến như:
+ $roles : lấy danh sách tất cả role
+ $roleId : chúng dùng để chọn select option, để nó cập nhật lại giá trị roleId
+ $permissions : lấy các permission từ việc chọn select option roleId
+ updatedRoleId() : đây là hàm update thuộc tính $roleId , các bạn chú ý nó có phía trước là từ "update", phía kèm theo phía sau là tên của thuộc tính nhé
Okay, tiếp tục ta cần cấu hình view livewire component để hiện thị dữ liệu ra thôi
+ resources\views\livewire\role-permission.blade.php
<div>
<div>
<select class="w-full" wire:model.change="roleId" name="rolesId" >
@foreach ($roles as $role)
<option value="{{ $role->id }}">{{ $role->name }}</option>
@endforeach
</select>
</div>
<div>
<label>Permissions</label>
@if (!empty($permissions) && count($permissions) > 0)
@foreach ($permissions as $permission)
<span class="block">{{ $permission->name }}</span>
@endforeach
@endif
</div>
</div>
# Trường hợp nhiếu bạn dùng Multiple select option cũng được nhé, có điều chổ hàm updatedRoleId() nó nhận bằng array, nên bạn cần viết code thực thi câu lệnh select dữ liệu cho hợp lý
Ví dụ dưới đây là ta dùng "Multiple" trong select option
<div>
<div>
<select class="w-full" wire:model.change="roleId" name="rolesId" multiple = "multiple">
@foreach ($roles as $role)
<option value="{{ $role->id }}">{{ $role->name }}</option>
@endforeach
</select>
</div>
<div>
<label>Permissions</label>
@if (!empty($permissions) && count($permissions) > 0)
@foreach ($permissions as $permission)
<span class="block">{{ $permission->name }}</span>
@endforeach
@endif
</div>
</div>
Sau đó ta cần viết lại hàm updateRoleId() trong livewire component. App\Livewire\RolePermission.php
public function updatedRoleId()
{
Log::info("Role id:".json_encode($this->roleId));
$role = Role::find($this->roleId);
$this->permissions = $role->flatMap->permissions;
}
# Nếu bạn muốn dùng select2 tích hợp vào thì làm như sau:
Tại file view livewire component ta cần chỉnh sửa lại như sau:
<div>
<div wire:ignore>
<select class="w-full js-example-basic-multiple2" wire:model.change="roleId" name="rolesId" multiple = "multiple">
@foreach ($roles as $role)
<option value="{{ $role->id }}">{{ $role->name }}</option>
@endforeach
</select>
</div>
<div>
<label>Permissions</label>
@if (!empty($permissions) && count($permissions) > 0)
@foreach ($permissions as $permission)
<span class="block">{{ $permission->name }}</span>
@endforeach
@endif
</div>
</div>
@script
<script>
$('.js-example-basic-multiple2').select2({
theme: "classic",
width: function() {
return $(this).parent().width(); // Lấy chiều rộng của phần tử cha
},
selectionCssClass: '!mt-1.5 !w-full !rounded-lg !border-gray-200 !text-gray-700 !shadow-sm !sm:text-sm'
});
$('.js-example-basic-multiple2').on('change', function (e) {
let data = $(this).val();
@this.set('roleId', data);
});
</script>
@endscript
Tiếp tục chỉnh lại hàm updatedRoleId() trong livewire component lại xíu,. vì lúc này chúng ta gửi qua một array, nên cần kiểm tra array đó
public function updatedRoleId()
{
Log::info("Role id:".json_encode($this->roleId));
if (is_array($this->roleId) && count($this->roleId) > 0) {
$role = Role::find($this->roleId);
$this->permissions = $role->flatMap->permissions;
}
}