Svelteテンプレート構文

{#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 ブロックを使用できます。つまり、length プロパティを持つ任意のオブジェクトを使用できます。

各ブロックでは、array.map(...) コールバックの 2 番目の引数に相当する インデックス も指定できます。

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

キー付き各ブロック

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

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

キー式が提供されている場合（各リストアイテムを一意に識別する必要があります）、データが変更されたときに Svelte はアイテムを最後に追加または削除するのではなく、それを使用してリストを比較します。キーは任意のオブジェクトにすることができますが、オブジェクト自体が変更されても同一性が保持されるため、文字列と数値をお勧めします。

{#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 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 ブロック

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

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

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

このページを GitHub で編集する

前次

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