Modèles Svelte: boucles

Apprenez à travailler avec des boucles dans les modèles Svelte

Dans les modèles Svelte, vous pouvez créer une boucle à l'aide du{#each}{/each}syntaxe:

<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog}
<li>{goodDog}</li>
{/each}

Si vous êtes familier avec d'autres frameworks qui utilisent des modèles, c'est une syntaxe très similaire.

Vous pouvez obtenir l'index de l'itération en utilisant:

<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog, index}
<li>{index}: {goodDog}</li>
{/each}

(les index commencent à 0)

Lors de l'édition dynamique des listes en supprimant et en ajoutant des éléments, vous devez toujours transmettre un identifiant dans les listes, pour éviter les problèmes.

Pour ce faire, utilisez cette syntaxe:

<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}

Vous pouvez également transmettre un objet, mais si votre liste a un identifiant unique pour chaque élément, il est préférable de l'utiliser:

<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}

Téléchargez mon gratuitManuel de Svelte

Modèles Svelte: boucles

Apprenez à travailler avec des boucles dans les modèles Svelte

Plus de tutoriels sveltes: