Livewire中带wire:ignore的Select2动态赋值后视图不更新如何解决

问题核心原因 #

• 因使用wire:ignore标注，Livewire不会自动更新该区域DOM，而Select2会基于原生select生成独立的自定义渲染结构，直接操作原生select的取值、触发change事件无法同步到Select2的视图层
• 若待赋值的目标值没有对应<option>节点存在于原生select下，Select2无法识别该值，自然不会渲染选中状态

修复步骤 #

1. 确保wire:ignore配置正确 #

给select元素的父级套上wire:ignore，避免Livewire组件刷新时销毁已初始化的Select2实例：

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

2. 修正事件监听逻辑 #

直接调用Select2实例提供的val方法更新取值，不要只使用jQuery原生的val方法。如果你的选项是动态加载的，需要先判断对应option是否存在，不存在则先插入再赋值：

$('#subjects').select2({
    maximumSelectionLength: 1,
    minimumInputLength: 2,        
    tags: false,
    placeholder: 'Enter Subject(s)',
    // 其余原有配置保持不变
});   

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

Livewire.on('editSubject', subject => {
    console.log(subject);
    // 若目标option不存在则手动插入，可根据实际需求调整展示文本
    if ($(`#subjects option[value="${subject}"]`).length === 0) {
        $('#subjects').append(new Option(subject, subject, true, true));
    }
    // 调用Select2实例方法更新值，自动同步视图
    $('#subjects').select2('val', subject);
    // 同步更新Livewire属性
    @this.set('subjects', subject);
}) 

额外注意 #

如果你的subject是对象类型而非字符串/数字基础类型，需要保证传入的值和option的value属性值、格式完全匹配。

内容的提问来源于stack exchange，提问作者Орлов Владлен