在线元素/模态 LIVEWIRE V3 中时，细长选择不起作用

Question

在 livewire 模态（wire-elements/modal）内实现 slim select 时，搜索不起作用，我使用 alpine.js 来初始化组件，它正确加载所有内容，它不再丢失 css，但模态内部的搜索不起作用，只有其他组件中的模态外部 Livewire 才能正常工作

<div x-data="" class="w-full flex flex-col gap-2 pl-6 pb-8" wire:ignore>
    
    <x-label for="selectuser" class="">Ordem Serviço:</x-label>
    
    <select id="selectElement" class="" 
            wire:model.live="selectedOS" x-init="let slim = new SlimSelect({
                            select: '#selectElement',
                        })
                        console.log(slim);"
    >
        
        <option value="" selected>Selecione a OS</option>
        
        @foreach ($OSs as $OS)
            <option value="{{ $OS->id }}">{{ $OS->nome }}</option>
        @endforeach
        
    </select>
    
</div>

Answer 1

我们可以使用 Slim 的 afterChange 事件来代替 wire:model 来分配值 $selectedOS:

<div>

    <div x-data class="w-full flex flex-col gap-2 pl-6 pb-8" wire:ignore>

        <label for="selectuser" >
            Ordem Serviço:
        </label>

        <select id="selectuser"
                x-init="let slim = new SlimSelect({
                    select: '#selectuser',
                    events: { afterChange: (newVal) => { $wire.selectedOS= newVal[0].value; $wire.$refresh()} }
                })"
        >
            <option value="" selected>Selecione a OS</option>

            @foreach ($OSs as $OS)
                <option value="{{ $OS->id }}">{{ $OS->nome }}</option>
            @endforeach

        </select>

    </div>


    <div>
        Selected Os Id: [{{ $selectedOS }}]
    </div>

</div>