Search code examples
csslaravellaravel-livewire

Livewire and CSS(After adding a new div, class select2 is deleted)


After adding a new div, select2 class is deleted. I have a form with wire:submit.prevent="sendMessage"

 <form wire:submit.prevent="sendMessage" method="POST">

The form has a select2 and it works perfectly, except one moment, when I click on a button. A page does not reload, because of wire:submit.prevent. And when message is sent, I add a new div.

        @if($sent)
            <div class="alert alert-success">
                A message was sent successfully
            </div>
            <div wire:poll="reuse"></div>
        @endif

I checked this code without new div and it works great, however it does not matter which element, when I just try to add something new, class select2 is deleted.

Also I have added wire:ignore, and in this case it doesn't work

         <div wire:ignore>
                    <select wire:model="type" name="type[]" class="select2" multiple>
                        <option value=""></option>

                        @foreach($types as $type)
                            <option value="{{ $type->id }}">{{ $type->title }}</option>
                        @endforeach
                    </select>
                </div>

Solution

  • I have tried a lot of different methods, and only one works perfectly. I added an ID to the where select is. Now it looks like

    <div wire:ignore id="select2">
                    <select wire:model="type" name="type[]" class="select2" multiple>
                        <option value=""></option>
    
                        @foreach($types as $type)
                            <option value="{{ $type->id }}">{{ $type->title }}</option>
                        @endforeach
                    </select>
                </div>