Livewire 3.4中wire:ignore/x-ignore在Select2、CKEditor组件上失效

Livewire 3.4版本下，原本正常的wire:ignore指令失效，尝试x-ignore也无法解决。提交表单后数据已成功保存，但包含CKEditor、Select2或地图的元素会被重新加载，且对应的初始化脚本未执行。相关代码示例如下：

<div class="form-group">
  <label class="form-label col-form-label required">
    State
  </label>
  <div wire:ignore>
    <select name="state_id" id="state_id"
      data-placeholder="select options"
      class="form-select form-select-solid form-select-lg" wire:model="state_id">
      @foreach ($states as $s)
        <option value="{{ $s->id }}">
          {{ $s->name }}
        </option>
      @endforeach
    </select>
  </div>

  @error('state_id')
    <p class="text-danger mt-5px mb-0">{{ $message }}</p>
  @enderror
</div>

解决方法 #

• 调整wire:ignore的作用范围
  Livewire 3对wire:ignore的逻辑做了调整，若父级元素被Livewire更新，子元素的wire:ignore可能失效。尝试给容器添加wire:ignore.self，明确忽略自身及子元素的DOM更新：

  <div wire:ignore.self>
    <select name="state_id" id="state_id" data-placeholder="select options" class="form-select form-select-solid form-select-lg">
      @foreach ($states as $s)
        <option value="{{ $s->id }}">{{ $s->name }}</option>
      @endforeach
    </select>
  </div>
  

• 利用Livewire钩子重新初始化第三方组件
  Livewire更新DOM后，第三方插件的实例会丢失，需要在livewire:update钩子中重新初始化。以Select2为例：

  // 页面加载时先初始化一次
  $(document).ready(function() {
    $('#state_id').select2({
      placeholder: "select options",
      theme: "bootstrap-5"
    });
  });
  
  // Livewire更新后重新初始化
  document.addEventListener('livewire:update', function () {
    $('#state_id').select2({
      placeholder: "select options",
      theme: "bootstrap-5"
    });
  });
  

• 分离wire:model与忽略元素
  被wire:ignore包裹的元素上使用wire:model会导致Livewire跟踪该元素，可能触发不必要的更新。建议手动同步数据：

  1. 移除select上的wire:model
  2. 通过JS监听change事件同步到组件：

     $('#state_id').on('change', function() {
       @this.set('state_id', $(this).val());
     });
     

• 排查嵌套组件干扰
  若当前组件嵌套了其他Livewire组件，可能会干扰wire:ignore的作用域。确保忽略元素所在层级未被子组件的更新影响。

内容的提问来源于stack exchange，提问作者Kotzilla