全新Laravel 10项目中Vite构建后Alpine.js函数无法调用的问题

问题根源在于你在app.js中的代码顺序错误：先调用了Alpine.start()初始化Alpine，之后才监听alpine:init事件注册组件。alpine:init事件只会在Alpine启动过程中触发一次，你在启动后才添加监听，导致回调函数从未执行，solar组件根本没被注册，模板自然找不到addComponent方法。

修正方案（二选一即可） #

方案一：直接在Alpine启动前注册组件（更简洁）

移除alpine:init监听，直接在Alpine.start()之前注册你的组件：

import './bootstrap';
import Alpine from 'alpinejs';

window.Alpine = Alpine;

// 直接注册solar组件
Alpine.data('solar', () => ({
    components: [],
    addComponent() {
        let item = document.getElementById('component');
        this.components.push({
            id: item.value,
            name: item.options[item.selectedIndex].text,
        });
    },
}));

// 最后启动Alpine
Alpine.start();

方案二：确保监听事件在Alpine启动前添加

如果偏好使用alpine:init事件，只需调整代码顺序，先添加事件监听再启动Alpine：

import './bootstrap';
import Alpine from 'alpinejs';

window.Alpine = Alpine;

// 先添加alpine:init事件监听
document.addEventListener('alpine:init', () => {
    Alpine.data('solar', () => ({
        components: [],
        addComponent() {
            let item = document.getElementById('component');
            this.components.push({
                id: item.value,
                name: item.options[item.selectedIndex].text,
            });
        },
    }));
});

// 再启动Alpine
Alpine.start();

验证修改 #

执行npm run build重新构建资源，刷新页面后，模板中的x-data="solar"将正确绑定组件，addComponent方法也能正常响应表单提交事件。

注：原代码中addComponent的elem参数未使用，可以直接移除，不影响功能。

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