Laravel10+Livewire3环境下AlpineJS组件报错及重复渲染问题

针对你遇到的「ReferenceError」、元素重复渲染、点击事件触发两次的问题，核心原因是 Livewire 3 对 Alpine JS 的集成逻辑、脚本加载时机与 Livewire 2 完全不同，结合 Vite 的资源加载特性，需要调整组件实现方式：

1. 修正脚本注册方式（解决未定义错误与重复绑定） #

Livewire 3 提供了 @script 指令替代传统的 @push('scripts') + @once，它会自动处理脚本的加载时机与重复注册问题，避免 Alpine 初始化后才加载组件脚本的情况。

修改 Blade 组件代码：

<ul x-data="testApp" wire:key="test-app-{{ md5(implode(',', $items)) }}">
    <template x-for="(item, index) in items" :key="`test-item-${index}`">
        <li :idx="index" @click="logItem($event)" x-text="item"></li>
    </template>
</ul>

@script
<script>
    Alpine.data('testApp', () => ({
        // 直接初始化items，替代x-init赋值
        items: @json($items),
        init() {
            console.log('testApp.init()');
        },
        logItem(event) {
            console.log(event.target.innerText);
        }
    }));
</script>
@endscript

2. 关键修改说明 #

• 替换 @push 为 @script：Livewire 3 的 @script 会确保脚本仅加载一次，并在 Alpine 初始化前完成注册，彻底解决「testApp is not defined」错误。
• 移除 x-init 赋值：原 x-init='items=@json($items)' 会在 Livewire DOM 更新时重复执行，导致数据重复注入，直接在 Alpine.data 中初始化数据即可。
• 添加 wire:key：给外层 ul 绑定唯一标识，帮助 Livewire 正确识别组件DOM，避免重复渲染；同时给 x-for 的 :key 添加前缀，防止与其他组件的key冲突。

3. 备选方案：组件类中注册 Alpine 组件 #

如果偏好在后端控制脚本注册，可以在 Blade 组件类中使用 Livewire 的 #[Script] 属性：

use Livewire\Component;
use Livewire\Attributes\Script;

class TestComponent extends Component
{
    public array $items;

    public function __construct(array $items)
    {
        $this->items = $items;
    }

    #[Script]
    public function registerAlpineComponent()
    {
        return <<<'JS'
            Alpine.data('testApp', () => ({
                items: [],
                init() {
                    console.log('testApp.init()');
                },
                logItem(event) {
                    console.log(event.target.innerText);
                }
            }));
        JS;
    }

    public function render()
    {
        return view('components.test-component');
    }
}

此方案下，Blade 模板只需保留 HTML 结构，脚本会由 Livewire 自动注入。

4. 验证 Vite 加载顺序 #

确保 app.blade.php 中资源加载顺序正确（无需调整 @stack，@script 会自动处理）：

@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
@livewireScripts

以上修改完全适配 Livewire 3 的 Alpine 集成逻辑，可解决所有异常问题，同时保留 x-for 的业务需求。

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