laravel livewire breaks styling (@push script)

Question

I applied livewire on top of an already made laravel project.

It's simply applying wire:model to select like below.

 <select wire:model="wired" id="#selector-01" >
  <option>1</option>
  <option>1</option>
 </select>

and using the wire variable(wired) in if statement in for loop.

<select id="#selector-02">
   @foreach($numbers in $number)
     @if($some_id == $wired)
        <option> some_id </option>
     @endif
   @endforeach
</select>

I use it only as a component.

all the data is controlled in the original laravel controller.

livewire component is called by @livewire('component-name')

and everything works, as I thought it would, except styling.

I think it has to do with using SlimSelect

At the end of livewire component-name.blade.php, I have SlimSelect styling just like the below.

 @push('js')
        <script>
            new SlimSelect({
                select: '#selector-01'
            })
            new SlimSelect({
                select: '#selector-02'
            })
        </script>
 @endpush

I tried moving the codes to

1. original.blade.php with @push and @stack
2. app.blade.php without @push

but still styling breaks.

I am thinking a solution might be adding few lines in update() in live wire controller to reinject the styling script.

am I going in the right direction?

Please help.

Answer 1

adding the below code fixed the problem.

<script>
        document.addEventListener('livewire:update', function () {
            // Your JS here.
            new SlimSelect({
                select: '#selector-01'
            })
            new SlimSelect({
                select: '#selector-01'
            })
        })
</script>

you can also use livewire:onload instead of @stack and @push for loading styling onload

Reference to livewire doc