Laravel-livewire 多选2

Question

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

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

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

我在布局上加载 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>