Laravel Livewire：Bootstrap Select-Picker 无法渲染

Question

我想根据第 4 步的多步表单中选择的所有类别加载类别和多个子类别，但我无法使用 livewire 中的 bootstrap selectpicker（多个选择） 库选择多个类别成分。将 Bootstrap-Select 与 Livewire 结合使用的问题是，这两个库都使用 JavaScript 动态更新页面，这可能会导致冲突。如果我尝试在没有 Livewire 的情况下访问相同的内容，它工作得很好，但是使用 Livewire 我无法渲染它。

form.blade

@section('content')
    <livewire:multi-step-form />
@endsection

@push('before-styles')
    <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
@endpush
@push('before-scripts')
    <script rel="javascript prefetch" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script rel="javascript prefetch" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endpush

多步形式.刀片

<select wire:model="categories" name="categories[]" class="selectpicker form-control" multiple data-live-search="true" required id="categories" title="{{ trans('select category') }}">
    @foreach($categories as $category)
        <option value="{{$category->id}}" {{ (collect(old('categories'))->contains($category->id)) ? 'selected' : '' }}>
            {{$category->category}}
        </option>
    @endforeach
</select>

一些失败的尝试

Livewire 组件内部

尝试1

<script>
    document.addEventListener('livewire:load', function () {
        $('.selectpicker').selectpicker();
    });
</script>

这工作得很好，但只有一次，即在加载 Livewire 时开始。在 Livewire 组件被某些输入更新后，这不起作用。所以我在它下面添加了一个代码：

尝试2

<script>
    document.addEventListener('livewire:load', function () {
        $('.selectpicker').selectpicker();
        $('.selectpicker').selectpicker('render');
    });
</script>

这也不起作用。有些文章在更新的脚本中渲染分离，所以我也这样做了。

尝试3

<script>
    document.addEventListener('livewire:load', function () {
        $('.selectpicker').selectpicker();
    });

    document.addEventListener('livewire:updated', function () {
        $('.selectpicker').selectpicker('render');
    });
</script>

不幸的是这也不起作用。

我稍后也尝试将相同的脚本添加到我的

app.js

中，但不确定我哪里出错了，以及如何才能使其正常工作。

尝试4 保持脚本不变，并在父div中添加wire:ignore

<div wire:ignore class="form-group">
    <select wire:model="categories" name="categories[]" class="selectpicker form-control" multiple data-live-search="true" required id="categories" title="{{ trans('select category') }}">
        @foreach($categories as $category)
            <option value="{{$category->id}}" {{ (collect(old('categories'))->contains($category->id)) ? 'selected' : '' }}>
                {{$category->category}}
            </option>
        @endforeach
    </select>
</div>

按照 livewire/livewire/issues/45 中的建议，但这也不起作用。

Answer 1

你还没有走那么远。使用记录在here的 Livewires Javascript 生命周期钩子。

document.addEventListener("DOMContentLoaded", () => {
        Livewire.hook('component.initialized', (component) => {
            $('.selectpicker').selectpicker();
            $('.selectpicker').selectpicker('render');
        })
    });