Svelte - Blocos de repetição

No Svelte é super fácil criar iteradores de arrays e blocos de código que se repetem em um componente. Para isso basta se usar o {#each …}, como no exemplo abaixo:

<script>
    let frutas = ['Maçã', 'Banana', 'Tamarindo'];

</script>

Frutas: <br/>

<ul>
    {#each frutas as fruta}
        <li>{fruta}</li>
    {/each}

</ul>

Resultado:

Veja que o comando {#each frutas as fruta} … {/each} itera no array "frutas" e cada iteração faz com que a variável "fruta" referencia um dos elementos do array.

Vamos alterar exemplo para que seja possível adicionar uma fruta nova na lista:

<script>
    let frutas = ['Maçã', 'Banana', 'Tamarindo'];
    let novaFruta = '';

</script>

Frutas: <br/>

<input bind:value={ novaFruta } />

<button on:click={ () => {
        frutas = [...frutas, novaFruta];
        novaFruta = '';
    }

}

>
    Adicionar fruta

</button>

<ul>
    {#each frutas as fruta}
        <li>{fruta}</li>
    {/each}

</ul>

Resultado:

Agora toda vez que se digitar uma fruta nova e se clicar em "Adicionar Fruta" ela entra na lista de frutas e o HTML reage, alterando a exibição na listagem.

Repare que usamos um recurso no INPUT com o atributo "bind:value={ novaFruta }", isso faz com que o valor do INPUT fique associado à variável novaFruta, ou seja, se você digitar algo no INPUT o valor da variável muda automaticamente, e se você alterar o valor da variável "novaFruta" o que aparece no INPUT também muda automaticamente.

No on:click do botão "Adicionar Fruta" nós não chamamos uma função previamente declarada, ao invés foi passado um lambda, ou seja, uma função anônima, que tem o mesmo efeito e seu código vai rodar no clique do botão.

Para adicionar a fruta com o nome na variável "novaFruta" no array "frutas" usamos o comando: "frutas = [...frutas, novaFruta]'".

Esse comando significa que o array "frutas" será igual a um novo array com todos os elementos do anterior "...frutas", adicionado de novaFruta no final.

Vale observar que se você decidisse usar algo como "frutas.push(novaFruta)" o código não estaria errado, mas o Svelte não iria disparar a reatividade no HTML pois no Svelte a reatividade depende de atribuições com o uso do operador igual "=". Por isso foi necessário adicionar um elemento no array da forma que fizemos. Você até poderia usar o "push", mas em seguida deveria fazer algo como "frutas = frutas" para obter reatividade, o que é um pouco estranho e desnecessário. Essa é uma restrição do Svelte, mas tecnicamente é uma das coisas que faz ele ser tão rápido pois ele só reage quando algo muda explicitamente com o uso do operador igual "=".