Javascript 是否可以在alpineJS中引用外部js文件中的代码？

我有一个Alpine JS模板，我想从数组中引用

x-data

。我目前在HTML文件底部的

标记中声明了它，我想将它移动到外部文件中。如果我创建文件并将其与

链接，我的组件将停止工作

有效的示例：

<div x-data="{items}">
  <template x-for="(item, index) in items" :key="index">
    <a :href="item.link" x-text="item.text"></a>
  </template>
</div>
<script>
  const items = [
    { link: 'foo.com', text: 'foo' },
    { link: 'bar.com', text: 'bar' },
  ]
</script>

以及external.js文件的内容：

import 'alpinejs'

window.onload = () => {

console.log('loaded') // This logs in the console
  var items = [
    { link: 'foo.com', text: 'foo' },
    { link: 'bar.com', text: 'bar' },
  ]
}

---

我不确定我做错了什么，help:（

好的，所以您的问题是您正在侦听

窗口的回调中创建
项
变量。onload
事件。AlpineJs将在事件激发和定义变量之前已经加载并尝试解析DOM，包括您的变量

我们可以通过向Alpine组件的
x-init
属性添加
console.log
来查看加载顺序：

<div x-data="{}" x-init="console.log('init')"></div>
<script>
window.onload = () => {
    console.log('loaded')
}
</script>

如果您确实需要在其中包含动态内容，则需要将其注入AlpineJs实例中。最好的方法可能是通过自定义事件（工作示例）：


//创建并分派事件
let event=new CustomEvent（'my-event'{
详情：{
项目：[“您的”、“动态”、“项目”、“内容”]
}
});
窗口。dispatchEvent（事件）；

在这里，我们使用AlpineJs使用
@my event.window
属性（您也可以使用
x-on:my event.window
）在窗口上侦听事件。然后，我们可以通过
$event.detail
属性获取项目数据

希望这对你有帮助！如果你需要的话，下面还有一些额外的阅读

你能给我们看一下
external.js
的内容吗？很抱歉，你确定它正在加载到页面中吗？我编辑了这个问题以显示外部文件的内容
<div x-data="{}" x-init="console.log('init')"></div>
<script>
window.onload = () => {
    console.log('loaded')
}
</script>

// external.js
var items = ['your', 'items', 'array'];
// No window.onload needed

<div id="app" x-data="{items: null}" @my-event.window="items = $event.detail.items"></div>

<script>
// Create and dispatch the event
let event = new CustomEvent('my-event', {
    detail: {
        items: ['your', 'dynamic', 'items', 'content']
    }
});
window.dispatchEvent(event);
</script>