Plantillas esbeltas: bucles

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

Plantillas esbeltas: bucles

Aprenda a trabajar con bucles en plantillas Svelte

Tutoriales más esbeltos: