Jan*_*sen 3 node-modules laravel-mix alpine.js
我在新项目中开始使用 Alpine.js v3 时遇到问题。这是我的 package.json 和 Alpine 设置：
"devDependencies": {
"laravel-mix": "^6.0.19"
},
"dependencies": {
"alpinejs": "^3.0.6"
}
import Alpine from 'alpinejs'
window.Alpine = Alpine
window.Alpine.start()
Alpine.data('demo', () => ({
open: false,
toggle() {
this.open = !this.open
}
}))
驱动此标记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<script src="assets/app.js"></script>
</head>
<body>
<div x-data="demo">
<button @click="toggle">Expand</button>
<div x-show="open">Content...</div>
</div>
</body>
</html>
我使用 laravel-mix 构建我的 javascript：
// webpack.mix.js
let mix = require('laravel-mix');
mix
.setPublicPath('public')
.js('src/app.js', 'public/assets');
javascript 构建良好，页面加载没有错误，但是当我单击切换按钮时，内容按预期展开，但我在浏览器控制台中收到以下错误，并且内容不会在后续单击时隐藏。
未捕获（承诺中）TypeError：i 不是函数 app.js:2282:28
如果我推迟脚本或将其移动到底部，则页面在加载时会损坏，并且我会得到以下信息：
未捕获的类型错误：未定义不是非空对象 app.js:1995:12
谁能帮我修复我的设置吗？
很可能您只是忘记向标签添加defer属性script
<script defer src="assets/app.js"></script>
但也正如文档所说
如果您将 Alpine 导入到包中，则必须确保在导入 Alpine 全局对象时以及通过调用 Alpine.start() 初始化 Alpine 时在中间注册任何扩展代码。
所以将你的脚本更改为
import Alpine from 'alpinejs';
Alpine.data('demo', () => ({
open: false,
toggle() {
this.open = !this.open
}
}));
window.Alpine = Alpine;
// should be last
Alpine.start();
注意：如果出现像assignment to undeclared variable data您这样的错误，可以将导入更改为import Alpine from 'alpinejs/dist/module.cjs';
| 归档时间： |
|
| 查看次数： |
6639 次 |
| 最近记录： |