Alpine.js无法将x-data绑定到外部js文件中的函数

我正在用alpine.js创建一个应用程序

这是我的index.html文件的上下文

<!DOCTYPE html>
<html>
<head>
<title>Hello Alpine</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app" x-data="app()">
<div>
<button x-on:click="open">Open</button>
<div x-show="isOpen()" x-on:click.away="close">
// Dropdown
</div>
</div>
</div>
<script src="src/index.js"></script>
<script>
function app() {
return {
show: false,
open() {
this.show = true;
},
close() {
this.show = false;
},
isOpen() {
return this.show === true;
}
};
}
</script>
</body>
</html>

此代码工作正常，但是，如果我将app函数移动到index.js，我将在控制台中得到一个错误。

index . html:

<!DOCTYPE html>
<html>
<head>
<title>Hello Alpine</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app" x-data="app()">
<div>
<button x-on:click="open">Open</button>
<div x-show="isOpen()" x-on:click.away="close">
// Dropdown
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>

和index.js

import "./styles.css";
import "alpinejs";
function app() {
return {
show: false,
open() {
this.show = true;
},
close() {
this.show = false;
},
isOpen() {
return this.show === true;
}
};
}

当我运行这段代码时，我得到以下错误:

alpine.js:1907 Uncaught TypeError: app不是一个函数at eval (eval at tryCatch.el.el (alpine.js:NaN)，:3:54)

CodeSandbox链接在这里

默认情况下，alpine将在窗口级别查找组件。所以这个问题可以通过在窗口中创建一个app变量来解决，这是你完全相同的函数。

import "./styles.css";
import "alpinejs";
window.app = function () {
return {
show: false,
open() {
this.show = true;
},
close() {
this.show = false;
},
isOpen() {
return this.show === true;
}
};
};

有一个关于在Laracasts中提取alpine js组件的免费视频教程，你可以在这里查看。

相关内容

最新更新

热门标签：