Livewire ignore 没有收到正确的数据

问题描述

我正在使用 selectize.js 通过 livewire 进行下拉样式设置。我将 livewire 用于具有可排序列和分页的数据表。问题是，每次我进行分页或按列排序时，javascript 都会丢失，因此下拉列表没有样式。我已经使用 wire:ignore 解决了样式问题。现在我遇到的新问题是，传递给下拉列表的数据不准确。

@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

在 P 标签内，我得到状态“待定”，但在下拉列表中，它显示“已聘用”。正确的状态是“待处理”。

解决方法

（来自评论）@stalwart1014 例如，当我使用“select2”时，我会这样做 在内容部分

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

在脚本部分

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

在组件中

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

这对于 JS 元素并不总是正常工作...但希望这可以帮助您。问候