我如何告訴 Alpinex-for從服務器更新。換句話說,如何在 AlpineJs 中進行強制更新。
<select id="branches" name="branches" x-data="ajax" >
<option value="" disabled selected="">Choose</option>
<template x-for="branche in branches">
<option :value="branche.ID" x-text="branche.Branch_name"></option>
</template>
</select>
document.addEventListener('alpine:init', () => {
Alpine.data('ajax', () => ({
async branches() {
return await $.post("path-url", {
tb: "branches"
}, (data) => {
return data;
});
}
}))
})
uj5u.com熱心網友回復:
假設$.post來自jQuery:
<select id="branches" name="branches" x-data="getBranches()">
<option value="" disabled selected="">Choose</option>
<template x-for="branch in branches">
<option :value="branch.ID" x-text="branch.Branch_name"></option>
</template>
</select>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('getBranches', () => ({
branches: [],
init() {
$.post("path-url", {
tb: "branches"
}, (data) => {
this.branches = data
})
}
}))
})
</script>
我們使用該init()方法來獲取資料,該資料在渲染組件之前執行。您不必“強制”更新,只需改變一個反應性 Alpine.js 資料變數,Alpine.js 很快就會更新 DOM。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/443378.html
標籤:javascript jQuery 阿贾克斯 dom alpine.js
下一篇:在Dropdown中動態添加選項
