将Alpine.js点击滚动功能转为Datastar.js时函数未定义报错求助

当前Alpine.js实现代码 #

HTML（base.html） #

<div class="flex h-full items-end py-4 gap-x-14 text-white uppercase text-xs font-medium">
    <div><a href="#" x-on:click.prevent="scrollToId('contact')">Contact Us</a></div>
    <div><a href="#" x-on:click.prevent="scrollToId('about')">About us</a></div>
    <div><a href="#" x-on:click.prevent="scrollToId('services')">Services</a></div>
    <div><a href="#" x-on:click.prevent="scrollToId('products')">Products</a></div>
</div>

JavaScript（已导入index.js并通过Webpack打包） #

export default () => ({
    scrollToId(id) {
        // 用于页眉和页脚的导航链接
        const element = document.getElementById(id);
        if (element) {
            element.scrollIntoView({behavior: 'smooth' });
        }
    },
});

尝试的Datastar.js代码 #

将Alpine的x-on:click.prevent替换为Datastar的data-on-click__prevent后，代码示例如下：

<div><a href="#" data-on-click__prevent="scrollToId('contact')">Contact Us</a></div>

报错信息 #

执行后出现函数未定义错误，控制台输出：

127.0.0.1/:10  GET http://127.0.0.1:8000/assets/components/smoothScroll.js net::ERR_ABORTED 404 (Not Found)
init_embed.js:285 Search endpoint requested!
backend.js:2 Alpine Devtools: waiting for init request...
datastar.js:8 Uncaught datastar runtime error: ExecuteExpression
Context: {
  "plugin": {
    "name": "on",
    "type": "attribute"
  },
  "element": {
    "id": "",
    "tag": "A"
  },
  "expression": {
    "rawKey": "onClick__prevent",
    "key": "click",
    "value": "scrollToId('contact')",
    "fnContent": "scrollToId('contact')"
  },
  "error": "scrollToId is not defined"
}
    at pt (webpack://website/./assets/datastar.js?:8:1275)
    at Number.mt (webpack://website/./assets/datastar.js?:10:330)
    at On.e.runtimeErr.error (webpack://website/./assets/datastar.js?:11:876)
    at HTMLAnchorElement.c (webpack://website/./assets/datastar.js?:11:9090)
pt @ datastar.js:8
mt @ datastar.js:10
On.e.runtimeErr.error @ datastar.js:11
c @ datastar.js:11

解决方法 #

Datastar.js与Alpine.js的作用域机制不同，原scrollToId函数封装在Alpine组件实例作用域内，Datastar无法直接访问。可通过以下两种方案解决：

方案1：将函数挂载到全局作用域 #

修改JavaScript代码，把scrollToId暴露到全局window对象上：

// 替代原有的export default
window.scrollToId = (id) => {
    const element = document.getElementById(id);
    if (element) {
        element.scrollIntoView({behavior: 'smooth' });
    }
};

修改后，Datastar就能找到全局作用域下的scrollToId函数。

方案2：使用Datastar内联表达式直接实现滚动 #

无需单独定义函数，直接在data-on-click__prevent中写入滚动逻辑：

<div><a href="#" data-on-click__prevent="document.getElementById('contact')?.scrollIntoView({behavior: 'smooth'})">Contact Us</a></div>
<div><a href="#" data-on-click__prevent="document.getElementById('about')?.scrollIntoView({behavior: 'smooth'})">About us</a></div>
<div><a href="#" data-on-click__prevent="document.getElementById('services')?.scrollIntoView({behavior: 'smooth'})">Services</a></div>
<div><a href="#" data-on-click__prevent="document.getElementById('products')?.scrollIntoView({behavior: 'smooth'})">Products</a></div>

这种方式更贴合Datastar的使用习惯，无需额外全局函数。

另外，控制台出现的404错误（找不到smoothScroll.js），若该文件非业务必需，可检查并移除多余的引用代码，避免无效请求。

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