Livewire创建temporaryUrl后JavaScript脚本崩溃问题求解

核心故障原因 #

• 显隐逻辑完全绕开Livewire状态管理：用原生JS手动切换d-none类控制区块显示，和Livewire本身的DOM diff、状态渲染机制冲突。当文件上传完成生成temporaryUrl()时，Livewire会触发组件重绘，此时手动修改的DOM状态、绑定的事件监听和Livewire内部记录的DOM结构不匹配，直接抛出节点不存在、状态非法的运行时错误，导致脚本崩溃。
• 错误使用wire:ignore规则：给带wire:model绑定的文件输入框、textarea加了wire:ignore.self，会导致Livewire无法正确追踪节点绑定关系，重绘时丢失引用；同时CKEditor没有做重绘兼容，会出现重复初始化、实例不存在的报错。
• 事件绑定只执行一次：原生JS的addEventListener只在页面首次加载时绑定，Livewire每次重绘都会替换部分DOM节点，旧的节点引用失效后，后续触发事件会操作不存在的DOM，直接中断脚本执行。
• 临时图片调用缺少校验：直接对$additionalImages集合里的元素调用temporaryUrl()，如果集合里混入了非上传文件类型的对象，会直接抛出方法不存在的致命错误。

分步修复方案 #

1. 移除原生JS显隐控制，把状态交给Livewire托管 #

首先删掉之前写的两段监听复选框change、手动切换d-none的JS代码。
然后在对应Livewire组件类里新增两个公共属性，托管显隐状态：

// 组件类内新增
public $showExtendedDescription = false;
public $showDefaultImages = false;

修改第一个（CKEditor区域）的模板代码，把复选框用wire:model绑定状态，区块显隐直接由服务端状态控制：

<div class="form-group mt-25 d-flex flex-row">
    <label class="checkbox-container form-group__label">
        {{ __('Extended description') }}
        <input type="checkbox" wire:model="showExtendedDescription" class="checkbox">
        <span class="checkmark"></span>
    </label>
</div>

<div class="form-group mt-25 cke @if(!$showExtendedDescription) d-none @endif" id="extended-description-checkbox-div">
    <label class="form-group__label" for="extended-description">{{ __('Extended description') }}</label>
    <textarea wire:ignore wire:model.debounce.250ms.defer="extendedDescription" name="extended-description" id="extended-description" cols="30" rows="10"></textarea>
</div>

再修改第二个（图片上传区域）的模板代码，同样用Livewire状态控制显隐，移除输入框上错误的wire:ignore.self：

<div class="form-group mt-25 d-flex flex-row">
    <label class="checkbox-container form-group__label">
        {{ __('Use default images') }}
        <input type="checkbox" wire:model="showDefaultImages" class="checkbox">
        <span class="checkmark"></span>
    </label>
</div>

<div class="@if(!$showDefaultImages) d-none @endif" id="use-default-images-div">
    <div class="form-group mt-25">
        <label class="form-group__label">{{ __('Service images') }}</label>
        <div class="form-group__uploaded-images">
            @if (is_iterable($additionalImages) && count($additionalImages) > 0)
                @foreach($additionalImages as $image)
                    @if(method_exists($image, 'temporaryUrl'))
                        <img src="{{ $image->temporaryUrl() }}" alt="Temporary image">
                    @endif
                @endforeach
            @endif
        </div>
    </div>

    <div class="custom-file ml-auto">
        <button type="button" class="ml-auto styled-link">{{ __('Add images') }}</button>
        <div class="row mt-25">
            <div class="col-4 col-md-8"></div>
            <div class="col-8 col-md-4">
                <input wire:model.defer="additionalImages" type="file" multiple>
                @error('images.*') {{ $message }} @enderror
            </div>
        </div>
    </div>
</div>

注意：textarea上的wire:ignore.self修改为wire:ignore，避免Livewire重绘时破坏CKEditor渲染的DOM结构；文件输入框移除wire:ignore.self，保证Livewire能正常追踪上传状态。

2. 补全CKEditor的Livewire兼容逻辑 #

因为CKEditor会动态修改textarea对应的DOM结构，需要手动监听Livewire的生命周期，避免重复初始化、数据不同步的问题，把以下代码放到全局JS或者组件对应的脚本块里：

document.addEventListener('livewire:load', function () {
    let editorInstance = null;

    // 初始化编辑器的通用方法
    const initEditor = () => {
        const editorDom = document.querySelector('#extended-description');
        // 节点不存在、或者已经初始化过编辑器就跳过
        if (!editorDom || editorDom.nextElementSibling?.classList.contains('ck')) return;
        
        ClassicEditor.create(editorDom)
            .then(editor => {
                editorInstance = editor;
                // 编辑器内容变更时同步值到Livewire组件
                editor.model.document.on('change:data', () => {
                    @this.set('extendedDescription', editor.getData());
                });
            })
            .catch(err => console.error('CKEditor初始化失败:', err));
    };

    // 页面首次加载时初始化
    initEditor();

    // 每次Livewire重绘完成后，检查编辑器是否需要重新初始化
    Livewire.hook('message.processed', initEditor);
});

修复完成后，temporaryUrl生成时的DOM重绘会完全由Livewire管控，不会出现状态不匹配、节点丢失的问题，脚本就不会再崩溃了。

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