Estoy reeditando completamente esto, ya que ha crecido en complejidad. Permítanme explicarlo con un escenario reproducible más simple: https://codepen.io/ozeru/pen/oNEQYpd
<div x-data="{hasValue: false, categories: [{label: 'hey', id: 'first'}, {label: 'yow', id: 'second'}], htmlTest:'<input type=\'checkbox\'>'}"> <template x-for="(category, index) in categories"> <div> <div x-html="htmlTest"> </div> <label class="c-system-tile" x-bind:for="category.id"> <span class="hello" x-text="category.label"></span> </label> </div> </template>En el código, si marca la casilla de verificación y luego hace clic en prueba, verá que la casilla de verificación perderá su estado.
La razón de esto es que hacer clic en prueba significa que la propiedad hasValue se actualiza. Esta actualización desencadena una reevaluación COMPLETA de todas las fijaciones que tenemos. Entonces, cualquier cosa que se coloque en el x-html simplemente se vuelve a agregar y nos causa todo tipo de otros problemas (en este caso, un simple estado de casilla de verificación, pero pueden ser cosas diferentes).
Mi pregunta es, esto es normal? ¿Es así como funciona alpinejs? ¿O hay formas de eludir esto? ¿Parece que es un error o algo así, actualizar todos los enlaces porque se actualiza alguna propiedad aleatoria?
Editar: Acepto la respuesta de esta pregunta, ya que los comentarios contienen la solución. Es un problema de V2, necesita actualizar a V3.
Debe agregar un atributo key único al bucle for, para que Alpine.js pueda rastrear sus elementos:
<template x-for="category in categories" x-bind:key="\`systemCategory-\${category.id}\`"> Además, en lugar de x-on:click="selectCategory(category.key)" en las etiquetas, puede usar x-model en los botones de opción y usar $watch para responder al cambio de categoría.