laravel - Laravel Livewire 上的 select2 不起作用

Question

正如官方文档所示，我在选择中实现了 select2，但我无法让它完全工作。

<div>
<div wire:ignore>
    <select class="js-example-basic-single" name="state">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
    </select>

    <!-- Select2 will insert it's DOM here. -->
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
        $('.js-example-basic-single').on('change', function (e) {
            @this.set('foo', e.target.value);
        });
    });
</script>
@endpush

如果我在 View 中删除以下脚本，则 select2 组件呈现良好

$('.js-example-basic-single').on('change', function (e) {
                @this.set('foo', e.target.value);
            });

但当然我失去了所需的功能。
我使用的selct2添加链接如下

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{asset('SitioWeb/assets/select2/js/select2.min.js')}}"></script>

我错过了什么？

Answer 1

你可以使用引导选择

npm install bootstrap-select

它对我来说效果很好。这是我的代码。

<div class="form-group">
    <label for="permissions">{{ __('role.permissions') }}</label>
    <div class="col-sm-10">
        <div wire:key="UNIQUE_KEY">
            <div wire:ignore>
                <select id="permissions" wire:model="permissions"
                        data-live-search="true"
                        data-actions-box="true"
                        title="{{__('generic.select')}} {{ __('role.permissions') }}"
                        name="permissions[]" data-width="100%"
                        class="selectpicker permissions" multiple>
                    @foreach($list_permission as $permission)
                        <option value="{{ $permission->id }}"
                                data-subtext="{{ $permission->key }} {{ ' -'. $permission->table_name }}">

                            {{ __('permission.'.$permission->key) }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        @error('permissions') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
</div>

在脚本中:

   ....
   @push('scripts')
        <script>
            Livewire.restart();
            $(function () {
                $('.permissions').selectpicker();
            });
        </script>
    @endpush
</div>

在组件中

public $permissions = [];
public $old_permissions = [];

public function updatedPermissions()
{
    $filter_arrays = array_filter($this->permissions);
    $unique = array_unique($filter_arrays);
    $this->permissions = $unique;
}

在更新:

 if (! empty($this->old_permissions)){
     $updateRole = $this->role->find($this->modelId)->permissions()->detach();
     $updateRole = $this->role->find($this->modelId)->permissions()->sync($validatedData['permissions']);

  }elseif ($this->old_permissions != $this->permissions ){
     $updateRole = $this->role->find($this->modelId)->permissions()->attach($validatedData['permissions']);
   }