Aprenda a trabajar con bucles en plantillas Svelte
En las plantillas de Svelte puede crear un bucle utilizando el{#each}{/each}
sintaxis:
<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog}
<li>{goodDog}</li>
{/each}
Si está familiarizado con otros marcos que usan plantillas, es una sintaxis muy similar.
Puede obtener el índice de la iteración usando:
<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog, index}
<li>{index}: {goodDog}</li>
{/each}
(los índices comienzan en 0)
Al editar dinámicamente las listas eliminando y agregando elementos, siempre debe pasar un identificador en las listas para evitar problemas.
Lo haces usando esta sintaxis:
<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog (goodDog)}
<li>{goodDog}</li>
{/each}
<!-- with the index -->
{#each goodDogs as goodDog, index (goodDog)}
<li>{goodDog}</li>
{/each}
También puede pasar un objeto, pero si su lista tiene un identificador único para cada elemento, es mejor usarlo:
<script>
let goodDogs = [
{ id: 1, name: 'Roger'},
{ id: 2, name: 'Syd'}
]
</script>
{#each goodDogs as goodDog (goodDog.id)}
<li>{goodDog.name}</li>
{/each}
<!-- with the index -->
{#each goodDogs as goodDog, index (goodDog.id)}
<li>{goodDog.name}</li>
{/each}
Descarga mi gratisManual Svelte
Tutoriales más esbeltos:
- Empezando con Svelte - un breve tutorial
- Cómo trabajar con accesorios en Svelte
- Cómo importar componentes en Svelte
- Cómo exportar funciones y variables desde un componente Svelte
- Plantillas esbeltas: lógica condicional
- Cómo volver a renderizar un componente Svelte a pedido
- Ranuras esbeltas
- Cómo agregar comentarios en las plantillas de Svelte
- Ataduras esbeltas
- Manejo de actualizaciones de estado en Svelte
- Declaraciones reactivas en Svelte
- Eventos esbeltos del ciclo de vida
- Plantillas esbeltas: bucles
- Resolver promesas en plantillas Svelte
- Trabajar con eventos en Svelte
- Gestión de estado de componentes cruzados en Svelte
- Cómo acceder a un parámetro de URL en Sapper fuera del módulo de script
- Cómo aplicar CSS dinámicamente en Svelte
- Cómo redirigir a una URL en Sapper
- Cómo simular un bucle for en plantillas Svelte