Estoy usando AlpineJS y momentjs. El usuario puede agregar un montón de fechas y horas y esas se envían a una matriz. Esta matriz se representa en la página con x-for.
Ahora quiero un método setTime, que cambie la hora de cada objeto de fecha y hora. En teoría, esto es bastante fácil. Pero pensé que AlpineJS no detectará, que algo ha cambiado y, por lo tanto, no volveré a renderizar el x-for.
Estoy usando this.dates.map(item => item.hour(10).minute(0)); en mi ejemplo aquí: https://jsfiddle.net/suny1vj9/
¿Hay alguna manera de decirle a AlpineJS que vuelva a renderizar, ya que sé cuándo se debe volver a renderizar?
También pensé en tener los datos dos veces. Uno como objeto de momento/fecha y otro como representación de cadena. Eso también resuelve el problema, pero siento que tiene que haber una solución más bonita que mantener dos arreglos similares y mantenerlos sincronizados.
¿Cómo resolverías este problema de manera diferente?
Es un problema conocido con la mutabilidad de MomentJS . Y dado que cualquier cambio en el objeto reemplaza al objeto original, Alpine.js no puede detectar el cambio. Para solucionarlo, tendrá que clonar () el objeto original después de configurar la hora y los minutos, para que Alpine.js pueda detectar que el objeto ha cambiado (quiero decir que es un objeto nuevo en ese momento)
Además, la función map () devuelve la nueva matriz, por lo que debe cambiar su código de esta manera.
function test() { return { dates: [ moment("2022-04-23"), moment("2022-04-25"), moment("2022-04-26"), moment("2022-04-27"), moment("2022-04-28")], setTime() { this.dates = this.dates.map((item) => item.hour(10).minute(0).clone()) }, } }Esto resolverá tu problema :)
Aquí está el enlace de violín https://jsfiddle.net/tujfyhs2/1/