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


Tutoriales más esbeltos: