为什么事件监听器在第二次事件触发后未正常生效？

使用Livewire、Alpine、FilePond搭建照片上传表单，预期在照片处理完成后显示“Save”按钮完成文件持久化存储。通过Alpine实现按钮显隐逻辑时，单独测试事件监听、组件显隐逻辑均正常，组合运行时无报错，但showSaveButtons容器内的按钮始终无法显示。

原问题代码 #

HTML片段 #

<div x-data="showSaveButtons">
    <div x-show="open">
        Buttons Go Here
    </div>
</div>

JS片段 #

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('showSaveButtons', () => ({
            open: false,
        }));
        document.addEventListener("FilePond:processfiles", () => {
            Alpine.data('showSaveButtons', () => ({
                open: true,
            }));
        });
    })
</script>

核心是Alpine.data()API使用错误：
Alpine.data()仅用于注册组件初始化时的构造工厂，只在组件首次挂载时执行一次，后续重复调用该方法注册同名构造函数，不会对已经渲染完成的组件实例产生任何影响。你在FilePond的事件回调里重新注册组件，只是修改了后续新初始化组件的默认值，当前页面已经存在的组件实例的open属性始终是初始的false，因此按钮一直处于隐藏状态。

两种实现方式都可以满足需求，优先推荐第一种，写法更简洁、和Alpine的设计逻辑更契合：

方案1：组件内直接监听全局事件（推荐） #

不需要单独在JS里注册组件，直接在模板节点上通过Alpine的全局事件监听修改状态，所有逻辑内聚在组件上：

<div x-data="{ open: false }" @FilePond:processfiles.window="open = true">
    <div x-show="open">
        Save
    </div>
</div>

说明：事件后缀.window代表监听window上派发的全局事件，FilePond的事件默认绑定在document/window上，加此后缀Alpine才能正确捕获到事件。

方案2：外部JS修改组件实例 #

如果需要在外部JS逻辑中控制组件状态，不要重复注册Alpine.data，可以通过DOM节点获取对应的Alpine组件实例，直接修改实例属性即可：

<!-- 给组件根节点加唯一标识 -->
<div id="save-btn-container" x-data="showSaveButtons">
    <div x-show="open">
        Save
    </div>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        // 仅在初始化阶段注册一次组件即可
        Alpine.data('showSaveButtons', () => ({
            open: false,
        }));
    })

    // 事件监听放在alpine:init回调外部即可
    document.addEventListener("FilePond:processfiles", () => {
        // 拿到对应DOM节点的Alpine实例，直接修改属性
        Alpine.$data(document.getElementById('save-btn-container')).open = true
    });
</script>

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