ループ¶
データのリストを繰り返し処理する場合は"{#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>
適用イメージ