Laravel Livewire中Bootstrap Select-Picker无法渲染的问题求助

在Laravel Livewire多步骤表单的第4步中，我需要根据选中的所有类别加载对应的子类别，但使用Bootstrap Selectpicker多选组件时无法正常选择多个类别。单独使用Bootstrap Selectpicker功能完全正常，但和Livewire结合后，组件更新就会失效，推测是两者动态更新DOM的机制冲突导致。

form.blade.php #

@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

multi-step-form.blade.php #

<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:load时初始化组件：首次加载有效，组件更新后失效

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

• 初始化后调用render方法：依旧无效

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

• 分别在livewire:load和livewire:updated中处理：还是无效

  document.addEventListener('livewire:load', function () {
      $('.selectpicker').selectpicker();
  });
  
  document.addEventListener('livewire:updated', function () {
      $('.selectpicker').selectpicker('render');
  });
  

• 给父元素添加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>
  

• 将脚本添加到app.js中：问题依旧

核心思路 #

Livewire更新DOM时会替换组件内元素，wire:ignore需正确作用于Bootstrap Selectpicker生成的完整DOM结构，同时要在Livewire更新事件中重新刷新组件，还要手动同步Selectpicker选中状态与Livewire模型值。

步骤1：调整组件结构与wire:ignore使用 #

将wire:ignore加到包裹select的容器上，同时移除old()判断（Livewire会自动处理模型值的选中状态）：

<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($categoryList as $category)
            <option value="{{$category->id}}">
                {{$category->category}}
            </option>
        @endforeach
    </select>
</div>

步骤2：同步Selectpicker与Livewire的状态 #

通过监听Selectpicker的选中事件更新Livewire模型，同时在Livewire更新后刷新组件UI：

document.addEventListener('livewire:load', function () {
    // 初始化Selectpicker
    $('.selectpicker').selectpicker();

    // 监听Selectpicker选中变化，同步到Livewire模型
    $('.selectpicker').on('changed.bs.select', function() {
        const selectedValues = $(this).val() || [];
        @this.set('categories', selectedValues);
    });

    // Livewire组件更新后，刷新Selectpicker
    document.addEventListener('livewire:updated', function () {
        $('.selectpicker').selectpicker('refresh');
    });
});

步骤3：调整Livewire组件逻辑 #

确保组件内属性命名清晰，避免变量冲突，同时处理类别列表与选中值的逻辑：

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Category;

class MultiStepForm extends Component
{
    public $categories = []; // 存储选中的类别ID
    public $categoryList; // 存储所有类别选项列表

    public function mount()
    {
        $this->categoryList = Category::all();
    }

    // 选中类别变化时加载子类别（示例逻辑）
    public function updatedCategories()
    {
        // 这里添加加载对应子类别的代码
        // ...
    }

    public function render()
    {
        return view('livewire.multi-step-form');
    }
}

关键注意事项 #

• 使用selectpicker('refresh')而非render，前者会重新读取原生select的状态并更新UI
• 因wire:ignore会让Livewire停止监听元素变化，必须手动通过changed.bs.select事件同步选中值到Livewire模型
• 避免变量命名冲突（比如原代码中循环的$categories和绑定的$categories属性重名）

内容的提问来源于stack exchange，提问作者Rajveer