从 Ajax 更新 x-for - Alpine Js

Question

我如何告诉 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;
                });
            }
        }))
    })

Answer 1

假设 $.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。

从 Ajax 更新 x-for - Alpine Js

update x-for from Ajax - Alpine Js

javascript

jquery

ajax

dom

alpine.js