Livewire V3组件自定义JS在FilamentPHP V3模态框中失效排查

可能的错误点及对应修复方式 #

1. @script标签内嵌套了<script>标签 #

Livewire的@script指令本身会负责将包裹的JS代码注入到页面中，无需手动添加<script>标签。如果你的代码嵌套了该标签，会导致Blade无法正确解析@script指令，直接输出标签文本。

错误示例：

@script
<script>
// 你的JS代码
</script>
@endscript

修复后：

@script
console.log("条码打印脚本执行");
// 你的自定义逻辑
@endscript

2. Livewire组件视图缺少唯一根元素 #

Livewire要求组件视图必须有唯一的根DOM元素，否则会导致渲染异常，指令无法被正确处理。确保print-label.blade.php的结构类似：

<div class="print-label-container">
    <!-- 条码内容、表单等组件内容 -->
    <div>{!! $barcodeHtml !!}</div>

    @script
        // 你的JS代码
    @endscript
</div>

3. 动态模态框场景下@script解析时机问题 #

Filament模态框通过AJAX动态加载内容，部分场景下@script指令的解析时机可能不匹配。这种情况下，推荐改用Livewire组件类的$this->js()方法注入JS：

在PrintLabel.php组件类的生命周期方法（比如mount）中注入代码：

namespace App\Livewire\Inventory;

use Livewire\Component;

class PrintLabel extends Component
{
    public $inventoryItemId;

    public function mount($inventoryItemId)
    {
        $this->inventoryItemId = $inventoryItemId;

        // 注入自定义JS
        $this->js('
            // 初始化条码打印逻辑
            console.log("处理条码打印，ID：' . $this->inventoryItemId . '");
            // 比如调用打印API或初始化条码插件
        ');
    }

    public function render()
    {
        return view('livewire.inventory.print-label');
    }
}

这种方式不受动态加载场景影响，JS会在组件渲染后自动执行。

4. 确认版本兼容性 #

确保Filament V3和Livewire V3为最新兼容版本，避免因版本不匹配导致指令解析问题。可执行以下命令更新：

composer update filament/filament livewire/livewire

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