Choices.js wire:ignore

#1

Hi

I created a select component with choices.js. Everything is working fine but when I wire:ignore the div and wire:model the model id validation doesnt work in Livewire for the select component. If I remove the wire:ignore attribute everything is working fine but I loose the Choices Styling (instance).

This is my code:

<div

    x-data

    x-init="() => { 

        const cityChoice = createChoicesInstance(

        'city'

    )

    // console.log($wire.get('cities'));

    };"

    wire:ignore

    wire:model="{{ $attributes['id'] }}" >

        <div 

    class="{{ $attributes['classes:div'] ?? 'py-3 px-1'}}"

    >

    @if($attributes['label'])

    <label class="{{$attributes['classes.label'] ?? 'block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2'}}" for="{{ $attributes['id'] }}">

        {{ $attributes['label'] }}

    </label>

    @endif

    <select id="{{ $attributes['id'] }}" x-ref="{{ $attributes['id'] }}">

        <option value="">{{ isset($attributes['placeholder']) ? $attributes['placeholder'] : '-- Select --' }}</option>

       @if($attributes['options'] && count($attributes['options'])>0)

            @foreach($attributes['options'] as $option)

                <option value="{{ $option[$attributes["optionkey"]] }}" >{{ $option[$attributes["optionvalue"][0]] . $attributes["separator"] . $option[$attributes["optionvalue"][1]] }}</option>

            @endforeach

        @endif

    </select>

    @error($attributes['model'])

        <div @if($attributes['classes:error']) {{ $attributes['classes:error'] }} @else class="text-red-700" @endif>{{ $message }}</div>

* List item

@enderror

    </div>

</div>