Laravel-livewire多select2

Question

我已经开始使用Laravel-Livewire，并在其中一个组件中添加了Select2选择框库。

问题是，该组件有多个选项卡，当我使用Select2输入在选项卡上加载该组件时，一切都很正常：

​

​

但是，如果我在其他选项卡上加载组件，或者甚至更改选项卡并返回到此选项卡，则Select2不会正确加载并返回到常规的多选项：

​

​

我正在layout上加载CSS和JS文件，所以每次我获得这个组件时都会加载它们。

我甚至将这个脚本添加到了组件中

<script>
   $('.select2').select2();
</script>

以强制此输入为select2，但即使此脚本也不起作用。

Answer 1

尝尝这个

// in component
protected $listeners = [
  'selectedItem'
];

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

public function selectedItem($value)
{
   dd($value);
}

// in blade script section
<script>
  window.loadSelect2 = () => {
   $('.select2').select2().on('change',function () {
     livewire.emitTo('name-component','selectedItem',$(this).val());

     // or

     // @this.set('propertyName',$(this).val());
   });
  }
  loadSelect2();
  window.livewire.on('loadSelect2Hydrate',()=>{
     loadSelect2();
  });
</script>