Gjenbruk og testing
1 <!-- _komponenter/Teller.svelte --> 2 <script> 3 4
export let navn export let verdi = 0
5 6
// Variabler for å styre endringen let endrerNavn = false 8 let endringsforslag = "" 9 </script> 7
10 11 {#if endrerNavn} 12 <!-- Dette vises hvis man trykker på endre-knappen --> 13 <label>Nytt navn: <input bind:value={endringsforslag} /></label> 14
<button
15 on:click={() => { 16 navn = endringsforslag 17 endrerNavn = false 18 }} 19
>
20 Lagre 21 </button> 22
<button on:click={() => (endrerNavn = false)}> Avbryt </button>
23 {:else} 24 <span> 25 <!-26 Vi har lagt navn i en span-tag med litt rom til høyre 27 og kuttet ut kolonet 28 --> 29 <span style="margin-right: 0.5rem"> 30 {navn} 31 <!-- Knapp for å aktivere endring --> 32 <button 33 on:click={() => { 34 endringsforslag = navn 35 endrerNavn = true 36 }} 37 > 38 39 </button> 40 </span> 41 <button on:click={() => (verdi = verdi - 1)}>-</button> 42 {verdi} 43 <button on:click={() => (verdi = verdi + 1)}>+</button> 44 </span> 45 {/if}
Merk: Hvis du tester denne handlelisten, vil du kanskje oppdage at den oppfører seg litt rart i noen situasjoner. Dette er en feil vi har beholdt med vilje, slik at vi kan se på den i neste delkapittel.
25
