Ciclos o Bucles: x-for Alpine JS 9
Vamos a conocer otra característica importantísima en este tipo de frameworks que sería el uso de los for con los cuales vamos a poder crear un bloque de htm de html un conjunto de html en base al tamaño de array por ejemplo aquí tenemos una array de tres dimensiones y queremos que cada uno de estos se represente como un p con la etiqueta p de párrafo entonces en vez de colocarlo uno a uno simplemente utilizamos el for en este caso el x4 tal cual puedes ver cuyo homólogo sería si lo llevamos a javascript sería el for o ciclo de toda la vida es decir para iterar cualquier elemento entonces por aquí la sintaxis es la siguiente como si fuera la del for each :
<div x-data="{todos:[ 'Sacar la basura', 'programar un rato', 'durar en el trabajo']}">
<template x-for="t in todos">
<p x-text="t"></p>
</template>
</div>
Queremos es decir este elemento realmente no lo queremos el que estamos colocando aquí arriba por lo tanto de una ya colocamos el template que es una etiqueta especial de htmlque es el template, que es una etiqueta que NO se renderiza. Es util para este tipo de escenarios de igual manera ahorita hacemos un experimento con esto eso es lo que tenemos en el codigo anterior.
Como puedes ver, con el array queremos iterar, se une el atributo x-for para iterar el mismos.
Para poder usar los atributos lógicos como el x-for y el x-if, se debe de usar en exclusiva la etiqueta de template, es decir, no puedes colocar como elemento contenedor del x-for o x-if un DIV o similares, en caso de que el elemento interno necesite de un contenedor, puedes colocarlo como elemento contenedor del template del x-for:
<div x-data="{ todos:['Todo 1', 'Todo 2', 'Todo 3'] }">
<ul>
<template x-for="t in todos">
<li x-text="t"></li>
</template>
</ul>
</div>Otro punto importante, es que el x-for solamente puede tener un elemento raíz, en el siguiente ejemplo el SPAN:
<div x-data="{todos:[ 'Sacar la basura', 'programar un rato', 'durar en el trabajo']}">
<template x-for="t in todos">
<p x-text="t"></p>
<span>No se va a renderizar</span>
</template>
</div>- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter