Ciclos/for y condicionales en Alpine.js 11

Veremos un ejemplo de como emplear los ciclos for junto con los condicionales en Alpine.

De manera demostrativa quiero mostrarte cómo puedes emplear los for o el x-for mejor dicho junto con los condicionales y también el for de objetos es decir en vez de iterar simplemente primitivas textos enteros etcétera iterar un objeto lo primero es que si quieres emplear el x-for y también el x-if te aconsejo que no lo hagasal mismo nivel o lo colocas antes o después es decir tienes tu x-for No coloques aquí también el x-if si para mostrar el for tienes que hacer alguna condición previa entonces colócalo antes y con esto te ahorras todo encapsulas todo el x-for o lo colocas adentro dependiendo de tus necesidades pero no lo colocas al mismo nivel eso por una parte en cuanto a la iteración de objetos es básicamente lo mismo tenemos en este caso ya no sería una primitiva como te comentaba sino sería un objeto tal cual puedes ver entonces aquí tenemos es un objeto y luego accedemos a sus opciones según sea el caso o sea necesario y es así de simple entonces esto lo hago también sobre todo porque obviamente cuando estamos trabajando con Livewire sí vamos a querer aplicar muchos condicionales precisamente para este tipo de aplicación de todo si el todo está completado entonces marcamos por ejemplo un checkbox de completado y si no está completado entonces colocamos otro tipo de checkbox o un iconito que que sea representativo y aparte de que siempre estamos es iterando objetos por lo que tenemos es decir tenemos una entidad de todos o lo que sea y siempre estamos estando un listado de objetos ya sea de categorías post etcétera entonces considero que
esto es importante por lo comentado.

Ciclos y condicionales

Como te comentaba o colocas antes el x-if en caso de que no quieras iterar el x-for esto no sé el usuario no está autenticado no te pagó qué s yo lo colocas antes o lo col acá después en base a en este caso si está completado o no quiero mostrar un texto un iconito lo que sea que sea representativo a este estado yo voy a colocarlo por aquí entonces:

<div
   x-data="{ todos:[ {completed:true, task:'Todo 1'}, {completed:false, task:'Todo 2'}, {completed:true, task:'Todo 3'} ] }">
   <template x-for="t in todos">
       <p>
           <template x-if="t.completed">
               <span>
                   Completed
               </span>
           </template>
           <template x-if="!t.completed">
               <span>
                   Incompleted
               </span>
           </template>
           <span x-text="t.task"></span>
       </p>
   </template>
</div>

Coloco template aquí coloco el X If y coloco la condición en este caso como es un bullano recuerda que esto a la final es un condicional de toda la vida entonces aquí colocas igual igual a true Igual igual a falso que sea distinto a esto lo que sea o en este caso como es un buano directamente coloco la evaluación del mismo y por aquí un poco lo mismo voy a colocar un spam que diga complete y en caso contrario voy a bueno colocar aquí la c mayúscula voy a duplicar esto control shift flecha abajo coloco aquí negado y este sería incomplete y esto sería todo por aquí regresamos acá y no sé ni qué tenemos claro aquí el problema que tenemos que tenemos múltiples elementos raíces como te comentaba esto es un problema así que vamos a colocar un solo elemento raíz ya que recuerda que los x-for solamente pueden tener un solo elemento raíz si no hace cosas como la siguiente que solamente muestra parte del texto o parte de el contenido html que estamos colocando ahí hacemos esto bueno Esto es para tener aquí un poquito de espacio venimos acá y aquí lo tenemos horrible el diseño pero otra vez no me interesa el diseño no me interesa el diseño y aquí puedes evaluarlo un poco más Esto es lo que está mostrando el primero era true Este era el único falso entonces ahí está el resultado aparece complete aquí el todo este es el primer elemento Aquí están los tres este sería incomplete y aquí está el resto del texto y lo mismo para el siguiente así que pues esto sería todo para lo que te comentaba antes emplear el e for con objetos y también condicionales otro punto importante es que aquí el xelf o el x-else If o algo similar que podíamos emplear o podemos emplear en cualquier lenguaje de programación se pudiera decir no existen al p así que tenemos que morir siempre con el If de la siguiente forma es decir lo lógico hubiera hecho hacer algo así colocar aquí x-else y que bueno si no se ejecuta esto esto es falso entonces mostrará esto pero esto no existe en al pin si haces esto o algo similar vas a ver que directamente no hace nada esto para que lo tengas presente Así que ahora sí ya con esto acabamos vamos a la siguiente clase.

02-12-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• Ciclos/for y condicionales en Alpine.js 11