En Svelte, podemos aprovechar la lógica de templates para crear bucles que nos permitan iterar sobre arrays y renderizar sus elementos de forma dinámica en el navegador. Esto es especialmente útil cuando queremos mostrar listas de datos, ya sean simples cadenas de texto o estructuras más complejas como objetos con múltiples propiedades.
Para construir un bucle en Svelte, utilizamos el bloque each. La sintaxis comienza con una almohadilla seguida de la palabra each, y dentro de corchetes indicamos el array que queremos recorrer y la variable local que representará a cada elemento en cada iteración. Por ejemplo, si tenemos un array llamado elementos compuesto por strings, podemos escribir:
{#each elementos as e}
<p>{e}</p>
{/each}
Esto hará que se genere un párrafo por cada elemento del array, mostrando su contenido. Pero no estamos limitados a estructuras simples; podemos anidar etiquetas HTML para crear una estructura más compleja, como un div con un strong y un span para mostrar la información de manera más detallada.
Además, el bloque each nos permite capturar el índice de cada iteración. Para ello, añadimos una segunda variable separada por una coma después de la variable del elemento. Por ejemplo:
{#each elementos as e, num}
<p>Tarea {num + 1}: {e}</p>
{/each}
Aquí, num representa el índice de la iteración, comenzando en 0, y podemos usarlo para numerar las tareas o elementos que estamos mostrando.
Cuando trabajamos con arrays de objetos, podemos crear componentes hijos que reciban las propiedades de cada objeto para renderizarlas de forma personalizada. Por ejemplo, si tenemos un componente Tarea que recibe nombre y terminado como props, podemos mostrar la tarea con un estilo diferente según su estado:
<script>
export let nombre;
export let terminado;
</script>
{#if terminado}
<p style="text-decoration: line-through;">✔️ {nombre}</p>
{:else}
<p>{nombre}</p>
{/if}
Luego, en el componente padre, podemos iterar sobre un array de objetos que representen tareas, pasando las propiedades correspondientes a cada instancia del componente:
<script>
import Tarea from './Tarea.svelte';
let tareas = [
{ id: 1, nombre: 'Comprar patatas', terminado: true },
{ id: 2, nombre: 'Limpiar el jardín', terminado: false },
{ id: 3, nombre: 'Enviar correo', terminado: false },
{ id: 4, nombre: 'Llamar a Lucía', terminado: true }
];
</script>
{#each tareas as tarea (tarea.id)}
<Tarea nombre={tarea.nombre} terminado={tarea.terminado} />
{/each}
Un aspecto importante al iterar sobre listas en Svelte es el uso de la key. Esta clave única, que suele ser un identificador propio de cada elemento, ayuda a Svelte a optimizar la actualización del DOM cuando el array cambia. Si no especificamos una key, Svelte usará el índice del array por defecto, lo que puede causar problemas al modificar la lista, como que se actualicen elementos incorrectos o que el orden se descontrole.
Por eso, es recomendable siempre proporcionar una key única, como el id de cada tarea, para que Svelte pueda identificar correctamente cada elemento y actualizar solo lo necesario.
Finalmente, Svelte ofrece una forma sencilla de manejar el caso en que el array esté vacío. Podemos añadir un bloque else dentro del each para mostrar un mensaje alternativo cuando no haya elementos que iterar. Por ejemplo:
{#each tareas as tarea (tarea.id)}
<Tarea nombre={tarea.nombre} terminado={tarea.terminado} />
{:else}
<p>No tienes nada que hacer hoy. Disfruta.</p>
{/each}
Así, si el array tareas está vacío, en lugar de mostrar una lista vacía, aparecerá el mensaje que hemos definido, mejorando la experiencia del usuario.
Con estas herramientas, podemos manejar listas en Svelte de forma eficiente y elegante, adaptándonos a diferentes tipos de datos y situaciones.