Problems with Livewire

[pwronline]

Hi! Has anyone managed to get it to work with livewire and its wire:model?

It starts fine but if you change an element of the selector it stops working due to the livewire reload. I would need a method to refresh it

Thx!

[oyejorge]

Hmm, I don't have any experience with Livewire but it seems like they could work together.. just not with the livewire reload.

What would work is to load JSON data from a Livewire backend. See these examples https://tom-select.js.org/examples/remote/

[pwronline]

Thx @oyejorge I'll try

[joleenshook]

So I've got this working with Livewire - just wrap the whole thing in a div and wire:ignore that div.

                           <div wire:ignore class="">
                                <x-search-select wire:model="part.classification_id" id="classification_id"
                                                 name="part.classification_id" label="Classification">
                                    <option value="">Choose</option>
                                    @foreach($classifications as $classification)
                                        <option value="{{$classification->id}}">{{$classification->name}}</option>
                                    @endforeach
                                </x-search-select>
                                <script>
                                    new TomSelect('#classification_id', {
                                        plugins: {
                                            remove_button: {
                                                title: 'Remove this item',
                                            }
                                        },
                                        create: true,
                                        allowEmptyOption: true,

                                    });
                                </script>

                            </div>

I am still working on how to hook into the item add event to update the server and retrieve the correct ID. So if anyone got that far, please share =)

[f4xy]

I also have an unusual problem. need to dynamically copy and increase the number of rows.

[pwronline]

I also have an unusual problem. need to dynamically copy and increase the number of rows.

I ended up using alpineJS and all the problems were fixed

[mikebronner]

@pwronline Could you explain your AlpineJS implementation? I'm currently stuck trying to get it to work with LiveWire.

[pwronline]

@mikebronner It is impossible for me to get the code with "tom select" I copy you an example with "tail select" but they work exactly the same, the same logic should work

Blade Component with AlpineJS

select.blade.php

<div wire:ignore
	x-data
	x-init="() => {
        let options = {};

        options.search = true;
        options.placeholder = 'Seleccione un elemento';
        options.deselect = true;

        if ('{{ $attributes['multiple'] }}' === 'yes') {
            options.descriptions = true;
            options.hideSelected = false;
            options.hideDisabled = false;
            // options.multiLimit = 15;
            options.multiShowCount = false;
            options.multiContainer = true;
        }

        tail($refs.{{ $attributes['wire:model'] }} , options);

        @if($attributes['multiple'] === 'yes')
        $refs.{{ $attributes['wire:model'] }}.addEventListener('change', function(el) {
            let values = [];
            for (var i = 0; i < this.selectedOptions.length; i++) {
                values.push(this.selectedOptions[i].value);
            }
            @this.set('{{ $attributes['wire:model'] }}' , values);
        });
        @else
        $refs.{{ $attributes['wire:model'] }}.addEventListener('change', function(el) {
            @this.set('{{ $attributes['wire:model'] }}' , this.selectedOptions[0].value);
        });
        @endif
    }
    ">
    <select 
        id="{{ $attributes['wire:model'] }}" 
        x-ref="{{ $attributes['wire:model'] }}" 
        @if($attributes['multiple'] === 'yes') multiple="multiple" @endif
    >

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

            @if(isset($attributes['group']))
                @foreach($attributes['options'] as $optionPadre)
                    <optgroup label="{{$optionPadre['nombre']}}">
                    @foreach($optionPadre[$attributes['group']] as $option)
                        <option value="{{$option['id']}}" @if($attributes['selected'] && in_array($option['id'], $attributes['selected'])) selected @endif >
                            {{$option['nombre']}}
                        </option>
                    @endforeach
                    </optgroup>
                @endforeach
            @else
                @foreach($attributes['options'] as $key=>$option)
                    <option value="{{$key}}" @if($attributes['selected'] && in_array($key , $attributes['selected'])) selected @endif >
                        {{$option}}
                    </option>
                @endforeach
            @endif

    	@endif
    </select>
</div>

Implementation

<x-select 
      wire:model="rolesSeleccionados"
      :options="$roles->pluck('name' , 'id')->toArray()"
      :selected="$this->rolesSeleccionados" 
      multiple="yes" 
/>

[mikebronner]

@pwronline Thank you for the clarification!

[shaband]

you can reload the tom select object after livewire finish the process
tom select doesn't support reload to I have to clear tom select property and init it again like that

document.addEventListener('DOMContentLoaded', () => {

Livewire.hook('message.processed', (message, component) => {
      let selects = el.querySelectorAll(component.el)
    if (selects.length != 0) {
        selects.forEach((select) => {
            select.tomselect = undefined
            new Tselect(select)
        })
    }
    })
})

[maveric]

You are a lifesaver. I struggled with this for way too long. I thought I had it until I needed a tom-select that changed its content dynamically based on another one and through my setup through a loop. This works flawlessly.

[seabasss]

This looks good too. My solution was to update a variable and send it into my tom select blade component in the wire:key field to force update. $wireKeyString = uniqid();

[lalitawagh]

Anyone can suggest how to use tom select because in livewire it is not loading
window.addEventListener('UpdateLivewireSelect', event => {
ts = new TomSelect('#asset_category_special', {plugins: ['dropdown_input']});
});

when I am trying to hit event after livewire call in that when I add tom select script it throw me Tom-select already initialized error please help me !!