Svelte: Each-blokker

I JavaScript bruker vi ofte for-løkker for å gå gjennom lister.

I Svelte bruker vi {#each ...} for å vise lister av data i HTML. Vi må avslutte blokken med {/each}.

Dette gjør det enkelt å generere HTML for hvert element i en array, enten det er enkle tekster eller komplekse objekter.

Vi kan selv velge hvilke html elementer vi ønsker å bruke!

1. Enkel liste

Vi bruker {#each items as item} for å gå gjennom hvert element i en liste.

{#each fruits as fruit }
<li>{fruit}</li>
{/each}

Forstå syntaksen:

  • {#each ... as ...} Den faste syntaksen. Forteller Svelte at vi skal gjøre noe for hver ting i listen.
  • fruits Navnet på arrayet (kilden). Må matche variabelen i <script>.
  • fruit Navnet du bestemmer selv for ett element. Dette bruker du inni blokken for å hente ut verdien.
  • Eple
  • Banan
  • Appelsin
  • Pære

3. Tom liste (else)

Hvis listen er tom, kan vi bruke {:else} for å vise en melding.

📭 Listen er tom!

{#each items as item}
<p>{item}</p>
{:else}
<p>Listen er tom!</p>
{/each}

2. Liste med indeks

Vi kan få tak i indeksen (nummeret i rekken) ved å skrive as item, i.

#1 Eple
#2 Banan
#3 Appelsin
#4 Pære
{#each fruits as fruit, i}
<div>#{i + 1}: {fruit}</div>
{/each}