如何在Laravel Blade组件属性中调用外部定义的JavaScript函数

Alpine.js 的表达式默认在组件自身的上下文内执行，不会直接访问全局 window 作用域下的自定义函数，因此直接调用你在全局定义的 fun() 会触发未定义错误。

你可以根据使用场景选择以下任意一种方案修复：

方案1：显式访问全局作用域（推荐，改造成本最低） #

直接在调用函数时加上 window. 前缀，指定从全局作用域获取函数即可：

<x-form.select
            wire:model.defer="state.trip_destination"
            :search="true"
            x-search="
                (query) => {
                    return new Promise((resolve, reject) => {
                        resolve(window.fun()); // 新增window.前缀
                    });
                }
            "
            name="state.trip_destination"
            type="text"
            id="trip-destination"
        />

如果存在脚本加载顺序问题，可以在定义函数时显式挂载到window对象，进一步保证可用性：

<script>
window.fun = function()
{
    return "HELEL";
    debugger;
};
</script>

方案2：注册为Alpine全局方法 #

如果这个函数需要在多个Alpine组件中复用，可以将其注册为Alpine全局魔法函数：

// 在Alpine初始化完成后注册
Alpine.magic('fun', () => {
    return () => "HELEL";
});

注册完成后在任意Alpine表达式内都可以直接通过$fun()调用，无需加前缀：

x-search="
    (query) => {
        return new Promise((resolve, reject) => {
            resolve($fun());
        });
    }
"

方案3：放到当前组件上下文 #

如果函数仅在当前页面使用，可以直接将函数定义到当前页面根元素的x-data中，Alpine就能直接识别：

<!-- 页面根元素添加x-data配置 -->
<div x-data="{
    fun() {
        return 'HELEL';
    }
}">
    <!-- 原有select组件代码不需要修改fun()调用 -->
    <x-form.select
        wire:model.defer="state.trip_destination"
        :search="true"
        x-search="
            (query) => {
                return new Promise((resolve, reject) => {
                    resolve(fun());
                });
            }
        "
        name="state.trip_destination"
        type="text"
        id="trip-destination"
    />
</div>

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