SvelteTemplate syntax

{#each ...}

{#each expression as name}...{/each}

{#each expression as name, index}...{/each}

値を繰り返し処理するには、each ブロックを使用します。対象の値は配列、配列のようなオブジェクト (例えば length プロパティを持つような)、または Map や Set のようなイテラブルである必要があります — つまり、Array.from を使用できるものであれば問題ありません。

<h1>Shopping list</h1>
<ul>
	{#each items as item}
		<li>{item.name} x {item.qty}</li>
	{/each}
</ul>

each ブロックは インデックス も指定可能で、これは array.map(...) コールバックの第二引数に相当します:

{#each items as item, i}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

Keyed each blocks

{#each expression as name (key)}...{/each}

{#each expression as name, index (key)}...{/each}

key の式（各リストアイテムを一意に識別できる必要があります）が与えられた場合、Svelte は、データが変化したときに（末尾にアイテムを追加したり削除するのではなく）キーを使用してリストの差分を取ります。key はどんなオブジェクトでもよいですが、そのオブジェクト自体が変更されたときに同一性を維持できるため、文字列か数値を推奨します。

{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}

<!-- or with additional index value -->
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

each ブロック内では分割代入や残余構文のパターンを自由に使用できます。

{#each items as { id, name, qty }, i (id)}
	<li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
	<li><span>{id}</span><MyComponent {...rest} /></li>
{/each}

{#each items as [id, ...rest]}
	<li><span>{id}</span><MyComponent values={rest} /></li>
{/each}

Each blocks without an item

{#each expression}...{/each}

{#each expression, index}...{/each}

もし n 回レンダリングしたいだけの場合は、as 部分を省略することができます (デモ):

<div class="chess-board">
	{#each { length: 8 }, rank}
		{#each { length: 8 }, file}
			<div class:black={(rank + file) % 2 === 1}></div>
		{/each}
	{/each}
</div>

Else blocks

{#each expression as name}...{:else}...{/each}

each ブロックは {:else} 節を持つことができ、リストが空の場合にそれがレンダリングされます。

{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>No tasks today!</p>
{/each}

Edit this page on GitHub

previous next

{#if ...} {#key ...}