Livewire Select2 Dynamic 不更新公共视图

Question

我正在使用带有 wire:ignore 的 select2 组件，我想在单击按钮后动态更新 select2 值。我使用事件设置了这个功能，并且事件工作正常，变量也被初始化。我无法更新此 select2 的公开视图。

我的刀

<select class="select2-example form-control" id="subjects" wire:model.lazy="subjects"  name="subjects"> 
 </select> 

@push('scripts')
<script>
$('#subjects').select2({
        maximumSelectionLength: 1,
        minimumInputLength:2,        
        tags: false,
        placeholder: 'Enter Subject(s)',
       .... // this all works great
});   

$('#subjects').on('change', function (e) {
        let data = $(this).val();
        @this.set('subjects', data);
});

// my event listener and it is working as well
Livewire.on('editSubject', subject => {
         console.log(subject);

         @this.set('subjects', subject);
         $('#subjects').val(subject);
         $('#subjects').trigger('change');   //the public view doesn't get updated
}) 
</script>
@endpush

到目前为止，我也尝试过浏览器调度事件。没有任何效果。解决方法是什么？非常感谢任何帮助。

Answer 1

注意：如果有人在实施上述解决方案时遇到实时验证问题，正如我在上面接受的答案中所评论的那样。

我的评论：

嘿，我已经实施了您的解决方案，它工作得很好，但是有 一个问题，这是场景，我提交空表单和所有 验证被触发，当我开始填写表格时出现错误 开始消失，但只要我更改 select2 验证 部分 $this-update($key, $value) 功能不起作用。请你 告诉我为什么实时验证不起作用？以及如何解决它 请。谢谢你 - Wcan

解决方案：

使用 syncInput() 函数而不是将值分配给 country 属性。更新的生命周期挂钩将自动触发。

public function setCountry($countryValue)
{
    // $this->country = $countryValue;
    $this->syncInput('country', $countryValue);
}

Answer 2

在刀片中

<div class="col d-flex display-inline-block">
  <label for="contact_devices">{{ __('Select Device') }}</label>
  <select id="contact_devices" wire:model="selectedDevice" class="form-control contact_devices_multiple" multiple="multiple" data-placeholder="{{ __('Select') }}">
    @foreach($devices as $device)
      <option value="{{ $device->id }}">{{ $device->alias }}</option>
    @endforeach
  </select>
</div>

<script>
  window.loadContactDeviceSelect2 = () => {
    $('.contact_devices_multiple').select2({
      // any other option
    }).on('change',function () {
      livewire.emitTo('tenant.contact-component','devicesSelect',$(this).val());
    });
  }
  loadContactDeviceSelect2();
  window.livewire.on('loadContactDeviceSelect2',()=>{
    loadContactDeviceSelect2();
  });

</script>

在组件中

public $selectedDevice;

protected $listeners = [
  'devicesSelect'
];

public function devicesSelect($data)
{
   dd($data);
   $this->selectedDevice = $data;
}

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