你好。
最近，在我们的项目中，我们必须创建一个多重选择下拉列表。我们正在使用Livewire和Vanilla JavaScript（无alpinejs），因此选项要么使用默认的多个选择，而且说实话，丑陋。
因此，我们必须检查其他东西。下一个选项是select2 js，一个流行的jQuery库。
select2的问题是jQuery，我们必须仅导入jQuery，而设计实际上也不是很好。
因此，经过一些研究，非常感谢skywalker，我们被介绍给了Virtual Select。
我们喜欢虚拟选择的是外观及其性能。真是太神奇了，没有依赖性，并且从第一次尝试起就起作用。
不幸的是，该插件尚未支持ES6。
但是，如果您想做出贡献，这里是the link发出讨论此事的问题。
在本教程中，我们将介绍如何导入虚拟选择以及如何在组件中检索数据。
话虽如此，首先要做的就是创建LiveWire组件。一个常见的用例将如下：注意： ：本教程将假设您已经安装了Laravel安装，并且还安装了Livewire。
注意： ：在本教程中，我们将不介绍如何从API获取数据，也许对于另一个教程很快ðÖ。
为特定用户选择多个权限。
因此，我们的组件将被命名，例如
EditUser。因此，在您的终端中运行此操作：
php artisan livewire:make EditUser
创建组件后，要做的下一个要做的事情是打开类，称为EditUser.php，然后编辑render方法如下：
use App\Models\Permission;
use Livewire\Component;
class EditUser extends Component
{
public function render()
{
$permissions = Permission::query()->get();
return view('livewire.edit-user')->with('permissions', $permissions);
}
}
您可以看到，我们添加了将其分配给所需用户所需的权限列表。
在这里要做的另一件事是准备公共财产以持有那些分配的权限。因此，课程将如下：
use App\Models\Permission;
use Livewire\Component;
class EditUser extends Component
{
public $selectedPermissions= [];
public function render()
{
$permissions = Permission::query()->get();
return view('livewire.edit-user')->with('permissions', $permissions);
}
}
当然，您的组件将拥有其他属性，例如用户属性和其他内容，但是为了本教程，我们使其变得简单。
无论如何，现在继续前往前端。您需要做的第一件事是“导入”虚拟选择CSS＆JS资产。
您可以下载它们，也可以使用CDN。
在此示例中，我们将使用jsdelivr.com。
因此，您需要的第一件事是在主布局文件中使用它们如下：
<script src="https://cdn.jsdelivr.net/npm/virtual-select-plugin@1.0.39/dist/virtual-select.min.js" integrity="sha256-Gsn2XyJGdUeHy0r4gaP1mJy1JkLiIWY6g6hJhV5UrIw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/virtual-select-plugin@1.0.39/dist/virtual-select.min.css" integrity="sha256-KqTuc/vUgQsb5EMyyxWf62qYinMUXDpWELyNx+cCUr0=" crossorigin="anonymous">
另外，您可能需要将@stack用于我们以后将在组件中使用的JavaScript。
修改这些修改后，我们的主要布局文件看起来像这样
...
@livewireStyles
<script src="https://cdn.jsdelivr.net/npm/virtual-select-plugin@1.0.39/dist/virtual-select.min.js" integrity="sha256-Gsn2XyJGdUeHy0r4gaP1mJy1JkLiIWY6g6hJhV5UrIw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/virtual-select-plugin@1.0.39/dist/virtual-select.min.css" integrity="sha256-KqTuc/vUgQsb5EMyyxWf62qYinMUXDpWELyNx+cCUr0=" crossorigin="anonymous">
</head>
<body>
@livewireScripts
@stack('js')
...
</body>
...
现在转到我们的组件。
第一件事是启动一个空的div供插件工作。因此，打开edit-user.blade.php并使用id添加空div，以便稍后可以参考。
首先，我们的组件看起来像这样：
<div>
<div id="permissions"></div>
</div>
初始化DOM元素后，接下来要做的是启动插件。为此，我们将“推”我们之前定义的堆叠的js。看起来像这样：
<div>
<div id="permissions"></div>
@push('js')
<script>
</script>
@endpush
</div>
现在让我们开始工作。我们需要定义我们的选项，为此，我们可以创建一个新的JavaScript变量来保留来自数据库的权限。
const permissions = [
@foreach ($permissions as $permission)
{
label: "{{ $permission->name }}",
value: "{{ $permission->id }}"
},
@endforeach
];
此代码将能够将权限集合转换为JavaScript数组。
之后，我们需要做的是启动插件本身。
<div>
<div id="permissions"></div>
@push('js')
<script>
const permissions = [
@foreach ($permissions as $permission)
{
label: "{{ $permission->name }}",
value: "{{ $permission->id }}"
},
@endforeach
];
VirtualSelect.init({
ele: '#permissions',
multiple: true,
options: permissions,
});
</script>
@endpush
</div>
您可以看到，我们将选项称为init方法：
ele：DOM的元素将呈现下拉
multiple：是否指示它是多重选择
options：下拉列表将填充的数据，我们之前定义了。
此刻，如果我们访问页面，我们的组件将是这样的：
在此阶段，一切都很好，但是问题是如何向Livewire讲述这些选择。在这一点上，我们将使用Livewire Beauty - €
为了将数据传递到Livewire，我们将使用JavaScript事件侦听器，只要选择选择，我们都会将其发送到我们的组件。
因此，在我们的视图文件中，我们需要添加的是以下代码
let selectedPermissions = document.querySelector('#permissions');
selectedPermissions.addEventListener('change', () => {
let data = selectedPermissions.value;
@this.set('selectedPermissions', data);
});
我们所做的是首先获得dom元素，然后我们附加了事件侦听器，每当选择更改时，我们都想获取选择并将其发送到我们的组件。
然后在组件级别，所选数据将在$selectedPermissions属性上可用，因此您可以将其分配给用户。
我希望您喜欢本教程，并获得有关它的信息。
如果您不清楚或您想询问更多信息，则可以通过Twitter与我联系或在下面发表评论。
再次感谢您，祝您有美好的一天。
信用：Edu Grande在Unsplash上的照片