从 Ajax 更新 x-for - Alpine Js
update x-for from Ajax - Alpine Js
我如何告诉 Alpine 从服务器更新 x-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;
});
}
}))
})
假设 $.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()
method 获取数据,在渲染组件之前执行。您不必“强制”更新,只需改变一个反应性 Alpine.js 数据变量,Alpine.js 将在不久之后更新 DOM。
我如何告诉 Alpine 从服务器更新 x-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;
});
}
}))
})
假设 $.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()
method 获取数据,在渲染组件之前执行。您不必“强制”更新,只需改变一个反应性 Alpine.js 数据变量,Alpine.js 将在不久之后更新 DOM。