ループ

データのリストを繰り返し処理する場合は"{#each 式} ... {/each}"で囲まれたブロックをループ処理できる。式には配列やiterableなオブジェクトを指定する。

下記例では、fruitsから順次取り出した要素をfに格納する。また、第2パラメータのiを指定した場合、ループカウンタとして0から順次インクリメントした値がiに格納される。

eachの記述方法

{#each fruits as f, i}
        <option value={f.id}>{i}:{f.name}</option>
{/each}

App.svelte

<script>
        let fruits = [
                {id: "0", name: "オレンジ"},
                {id: "1", name: "リンゴ"},
                {id: "2", name: "イチゴ"},
                {id: "3", name: "パイナップル"},
        ];

        let select_value;
</script>

<div>
        <select bind:value={select_value}>
                <option value="">選択してください</option>
        {#each fruits as f, i}
                <option value={f.id}>{i}:{f.name}</option>
        {/each}
        </select>
        <div>
        {select_value}
        {select_value == null ? "" : fruits.find(item => item.id === select_value).name}
        </div>
</div>

<style>
</style>

---

適用イメージ