div

Fordi vi ikke har gitt antallLoek noen verdi, får denne variabelen standardverdien 0 når vi binder den. Du kan prøve å endre standardverdien til 1 i Teller.svelte. Da skal du få opp en melding om at du har 9 varer i handlelisten i stedet for 8, og verdien for løk vil være 1.

Når en egenskap verken har en standardverdi eller får en verdi i komponentens tagg, får den verdien undefined. Hvis vi bare skriver <Teller /> og glemmer å sende inn en verdi for navnet, ser det altså slik ut:

LAGRE VARENE I ET ARRAY OG VISE DEM MED EN EACH-LØKKE

I kapittel 1 lærte du å iterere over et array med en each-blokk. I handlelisten vi holder på å utvikle, er det en fordel at varene er lagret i et array. Da kan brukeren legge til så mange varer hun vil, og ikke et forhåndsbestemt antall. Vi venter litt med å legge til muligheten for å legge til flere varer og begynner med å flytte det vi allerede har, over i et array.

1 <!-- handleliste.svelte --> 2 <script> 3 import Teller from "./_komponenter/Teller.svelte"

4

5 let varer = [ 6 { navn: "Løk", antall: 0 }, 7 { navn: "Epler", antall: 5 }, 8 { navn: "Melk", antall: 3 },

9 ] 10 11 const summerAntall = (varer) => { 12 let sum = 0 13 for (let vare of varer) {

14 sum = sum + vare.antall

15 } 16 return sum

17 } 18 19 $: totaltAntall = summerAntall(varer) 20 </script>

21 22 <h1>Handleliste</h1> 23 <ul> 24 {#each varer as vare} 25 <li><Teller navn={vare.navn} bind:verdi={vare.antall} /></li> 26 {/each} 27 </ul>

28 29 <p>Du har {totaltAntall} varer i handlelisten.</p>

Det første vi gjorde, var å legge varene til som objekter i arrayet varer. Siden arrayet kan inneholde mange verdier, er vi nødt til å bruke en løkke for å regne ut summen. Derfor har vi laget funksjonen summerAntall, som tar inn antall varer som input og bruker en løkke til å summere alle varene.

Linjen $: totaltAntall = summerAntall(varer) gjør at verdien til variabelen totaltAntall regnes ut på nytt hver gang brukeren endrer verdien til varer