'Livewire ignore does not receive correct data

I'm using selectize.js for dropdown styling with livewire. I'm using livewire for a data table with sortable columns and pagination. The issue is, every time I make pagination or a sort by column, the javascript goes missing thus, there's no styling for the dropdown. I've solved the styling issue using wire:ignore. Now the new problem that I have is that the data passed to the dropdown is not accurate.

@foreach($applications as $application)
    <p>{{$application->status}}</p>
    <div wire:ignore>
        <select class="selectize" name="status" data-width="200px">
            @foreach(['Pending',
                      'Hired',
                      'Under consideration'] as $status)
                <option
                    @if($application->status === $status) selected @endif>{{ $status }}</option>
            @endforeach
        </select>
    </div>
@endforeach

Inside the <p>{{$application->status}}</p> tag, I get the status 'Pending' but on the dropdown, it shows 'Hired'. The correct status is 'Pending'.

laravellaravel-livewireselectize.js


Solution 1:[1]

it's maybe a bit late, but worth to mention for the future, I will do not point directly to your issue but explain the workaround of wire:ignore, the wire:ignore directive ignores the updates or changes for the further requests and updates, this attributes is defined for playing with JS third party library, the wire:ignore directive prevent all it's nested elements from updating if you wish to except Childs from updating you can use wire:ignore.self directive

Solution 2:[2]

(from comment) @stalwart1014 for example, when I use "select2" I do this in content section

<select id="select2" wire:model="some">
//.....
</select>

in script section

$(document).ready(function() {
   window.initSelectDrop=()=>{
      $('#select2').select2({
          placeholder: '{{ __('Select') }}',
          allowClear: true});
      }
   initSelectDrop();
   window.livewire.on('select2',()=>{
      initSelectDrop();
   });
});

and in component

public function hydrate()
{
   $this->emit('select2');
}

This not always function properly with JS element...but hope this can help you. Greetings

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MANSOOR KOCHY
Solution 2 Prospero

Related Questions