1 回答

TA貢獻1796條經驗 獲得超4個贊
好的,所以你的問題是你items在監聽事件的回調中創建變量window.onload。AlpineJs 將在事件觸發和定義變量之前已經加載并嘗試解析 DOM,包括您的變量。
我們可以通過在 Alpine 組件的屬性中console.log添加一個來查看加載順序:x-init
<div x-data="{}" x-init="console.log('init')"></div>
<script>
window.onload = () => {
? ? console.log('loaded')
}
</script>
有了這個,這就是我們在開發工具中得到的(工作示例https://jsfiddle.net/hfm7p2a6/):
解決方案
解決這個問題有點取決于你需要做什么items
。如果沒有加載動態內容(即您不需要執行 ajax 調用來獲取數組的內容),那么只需忘記并將onload
變量放在腳本文件的頂層(工作示例https:// jsfiddle.net/nms7v4xh/):
// external.js
var items = ['your', 'items', 'array'];
// No window.onload needed
如果您確實需要那里有動態內容,則需要將其注入 AlpineJs 實例。在這里執行此操作的最佳方法可能是通過自定義事件(工作示例https://jsfiddle.net/6dLwqn4g/1/):
<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>
@my-event.window在這里,我們使用 AlpineJs 來使用屬性(您也可以使用)來偵聽窗口上的事件x-on:my-event.window。然后我們可以通過$event.detail屬性獲得項目數據。
添加回答
舉報