目前我正在嘗試修改 Alpine.js 中兩個資料塊之間的公共變數，但試圖使兩個塊盡可能獨立。第一個塊完成后將執行一個塊。我這樣做的方式是添加一個事件來通知第二個塊它已準備好進行處理，并且我根據變數隱藏兩個塊。
<div x-show="!$store.isSecondBlock" x-data="myFirstData()">
</div>
<div id="secondBlock" x-show="!$store.isSecondBlock" x-data="mySecondData()">
</div>
其中myFirstData()和mySecondData()在另一個檔案中定義為：
window.myFirstData = function(){
return {
next(){
//Modifies this.$store.sharedData
document.getElementById("secondBlock").dispatchEvent(new CustomEvent('secondBlockReady'));
this.$store.isSecondBlock = true;
},
}
}
window.mySecondData = function(){
return {
next2(){
//Some stuff here
},
init(){
document.getElementById("secondBlock").addEventListener('secondBlockReady', function(e){
this.next2();
});
},
}
}
商店創建為：
document.addEventListener('alpine:init', () => {
Alpine.store('isSecondBlock', False);
Alpine.store('sharedData', [an array here]);
}
問題是我似乎無法next2()在事件偵聽器中執行該函式Uncaught TypeError: this.next2 is not a function at HTMLDivElement.<anonymous>。我檢查了一下，我什至無法this.$store.sharedData從那里訪問變數。
next()因此，我到達了在執行函式時執行事件偵聽器的地步myFirstData()，但是next2()由于無法訪問，因此從未呼叫過。
在運行后運行的next2()函式很重要。mySecondDatanext()myFirstData同樣重要的是要確保mySecondData可以與其他不需要的資料塊一起運行myFirstData，并且僅在事件執行時觸發。一種將其想象為管道的方法是，其中每個步驟都修改一個共享物件，并且僅在第一個步驟完成時才執行下一步。
有什么方法可以實作嗎？
uj5u.com熱心網友回復：
在事件監聽器中獲取對mySecondData函式的init參考并在事件監聽器中使用該參考，以便監聽器函式知道如何參考next2()
window.mySecondData = function(){
return {
next2(){
alert('hi');
},
init(){
self = this;
document.getElementById("secondBlock").addEventListener('secondBlockReady', function(e){
self.next2();
});
},
}
此外，false不應大寫，但我確信在您的代碼中它已經沒有大寫。
document.addEventListener('alpine:init', () => {
Alpine.store('isSecondBlock', false);
Alpine.store('sharedData', ["an", "array", "here"]);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/493589.html