文章/答案/技术大牛

发布

问如何用mix设置Alpine.js 3
EN

Stack Overflow用户

提问于 2021-06-23 06:12:48

回答 1查看 4.8K关注 0票数 2

在一个新的项目中，我很难开始使用Alpine.js v3。这是我的package.json和阿尔卑斯的设置：

  "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构建了我的javascript：

// webpack.mix.js

let mix = require('laravel-mix');

mix
    .setPublicPath('public')
    .js('src/app.js', 'public/assets');

javascript构建良好，页面加载没有错误，但当我单击“切换”按钮时，内容将按预期展开，但我在浏览器控制台中得到以下错误，在随后的单击中内容不会隐藏。

TypeError:我不是一个函数app.js:2282:28

如果我推迟我的脚本或将它移到底部，页面在加载时就会中断，我得到以下内容：

未定义的TypeError:未定义不是非空对象app.js:1995:12。

有人能帮我修一下我的装置吗？

alpine.js

node-modules

laravel-mix

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-28 22:20:16

很可能您只是忘记将defer属性添加到script标记中

<script defer src="assets/app.js"></script>

同时也作为文档他说

如果您将阿尔卑斯导入到一个包中，则必须确保在导入阿尔卑斯全局对象时和通过调用Alpine.start()初始化阿尔卑斯之间注册任何扩展代码。

因此，请将脚本更改为

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';

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68094419

复制

相似问题

问如何用mix设置Alpine.js 3
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用mix设置Alpine.js 3EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用mix设置Alpine.js 3
EN