表单显示隐藏时调用的Livewire Media组件运行异常问题

问题根因 #

你遇到的三个问题本质上都是动态渲染Livewire组件的JS初始化冲突、ID重复导致的：

1. 页面首次加载的组件会正常执行全局JS初始化，所以功能正常
2. 注释初始组件后上传功能失效，是因为你的上传JS初始化逻辑依赖了首次加载的组件绑定的事件
3. 动态加载的表单内组件功能失效，是因为多实例ID冲突，且动态渲染的组件没有重新初始化JS事件

修复方案 #

1. 修复全局ID冲突 #

给Media组件内所有动态生成的ID加上当前组件的$name属性作为唯一后缀，避免多实例冲突：

修改Tab导航与面板的ID关联

<!-- 导航栏部分 -->
<ul class="nav nav-pills mb-2">
    @if(in_array('image',$options))
        <li class="nav-item">
            <a class="nav-link {{$options[0]==='image'?'active':''}}" data-toggle="pill"
               href="#image-show-{{$name}}">
                All Images
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#image-upload-{{$name}}"
               data-url="{{route('media.upload',['uniqueKey' => $uniqueKey,'table'=>$table,'tenant'=>tenantName()])}}">
                Upload Image
            </a>
        </li>
    @endif
</ul>

<!-- Tab面板部分 -->
<div class="tab-content">
    @if(in_array('image',$options))
        <div class="tab-pane container {{$options[0]==='image'?'active':''}}" id="image-show-{{$name}}">
            <livewire:media.show-images :type="$type" :select="$select" :name="$name" :key="'media-show-'.$name"/>
        </div>
        <div class="tab-pane container fade" id="image-upload-{{$name}}">
            <livewire:media.upload-images :key="'media-upload-'.$name"/>
        </div>
    @endif
</div>

2. 处理动态加载的JS初始化 #

如果你的testform表单是点击按钮后动态渲染到页面的（比如嵌套在隐藏的div、Bootstrap模态框内，或者通过AJAX加载），需要在表单渲染完成后执行JS重初始化：

// 监听表单容器的显示事件，比如Bootstrap模态框的shown事件
$('#testform-modal').on('shown.bs.modal', function () {
    // 重新扫描初始化Livewire组件事件
    Livewire.rescan();
    // 重新初始化拖拽上传插件，比如Dropzone的话执行
    Dropzone.discover();
    // 重新绑定Bootstrap Tab点击事件
    $(this).find('.nav-pills a').tab();
})

如果是使用Livewire动态切换显示表单，在触发显示的方法末尾派发浏览器事件，前端监听事件执行上面的初始化逻辑即可。

3. 优化上传组件的JS作用域 #

把upload-images组件内的拖拽上传初始化代码放到Livewire专属的脚本块内，确保每次组件渲染都会重新执行：

// 在media/upload-images.blade.php文件末尾添加
@script
<script>
    // 把你原来的拖拽上传初始化代码放到这里，不要写在全局公共JS里
    // 示例：
    // let dropzone = new Dropzone('#upload-area-'+$wire.name, {})
</script>
@endscript

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