¿Cómo puedo decirle a Alpine que actualice x-for desde el servidor? En otras palabras, cómo forzar la actualización en 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; }); } })) })Suponiendo que $.post es de 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> Usamos el método init() para obtener los datos, que se ejecuta antes de renderizar el componente. No tiene que "forzar" la actualización, simplemente mute una variable de datos reactiva de Alpine.js y Alpine.js actualizará el DOM poco después.