B45*_*45i 3 html javascript parcel alpine.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我会在控制台中收到错误。
索引.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 is not a function at eval (eval at tryCatch.el.el (alpine.js:NaN), :3:54)
CodeSandbox 链接在这里
Irf*_*fan 10
默认情况下，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;
}
};
};
里面有一个关于提取 alpine js 组件的免费视频教程，你可以在这里Laracasts观看。
| 归档时间： |
|
| 查看次数： |
8348 次 |
| 最近记录： |