Post Top Ad

Your Ad Spot

sábado, 28 de diciembre de 2019

Plantillas esbeltas: bucles

En las plantillas Svelte, puede crear un bucle utilizando la {#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}

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas