我正在嘗試使用 Alpine JS 構建登錄模式。打開頁面時首先顯示模式。我將其定義為：
<div x-data="login()" x-show="showLoginModal" x-cloak x-transition>
<form action="/token" method="POST" class="mt-8" @submit.prevent="submitData">
<!-- defining the login form -->
</form>
</div>
相應的 Javascript 部分如下所示（省略了一些與表單資料有關的變數。）：
<script>
let token = undefined
let showLoginModal = false
function login() {
async submitData() {
await fetch(await fetch('/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: formBody
})
.then((response) => {
if (response.status === 200) {
return response.json();
} else {
throw new Error("Login failed.");
}
}).then((data) => {
token = data.access_token
showLoginModal = false
})
}
}
</script>
我在這里想要實作的是模態此時已關閉。然而，盡管變數被正確設定為 false，模態仍然可見。
我知道這與在異步函式中設定的變數有關。但是，我不知道如何使它作業，并且到目前為止還沒有找到類似的教程。
所有幫助表示贊賞。
uj5u.com熱心網友回復：
問題是該login()函式不是有效的 Alpine.js 組件。它不回傳任何資料，因此showLoginModal不是回應式的，因此 Alpine.js 無法檢測到您何時改變了變數的值。使用loginComponentAlpine.data ()應該如下所示：
<div x-data="loginComponent()" x-show="showLoginModal" x-cloak x-transition>
<form action="/token" method="POST" class="mt-8" @submit.prevent="submitData">
<!-- defining the login form -->
</form>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('loginComponent', () => ({
showLoginModal: true,
token: undefined,
async submitData() {
await fetch(...).then((data) => {
this.token = data.access_token
this.showLoginModal = false
})
}
}))
})
</script>
請注意，我們必須使用this.組件定義中的前綴來訪問 Alpine.js 資料（它們是反應式的）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/430590.html
標籤：javascript 异步 异步等待 alpine.js
上一篇：異步函式中的Dart回傳關鍵字