Skip to main content

データのリストをループさせる必要がある場合は、each ブロックを使ってください。

<ul>
	{#each cats as cat}
		<li>
			<a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
				{cat.name}
			</a>
		</li>
	{/each}
</ul>

式(この場合は cats)は、任意の配列や配列に似たオブジェクトにすることができます(つまり、lengthプロパティを持っています)。一般的な反復可能なデータ構造は each [...iterable] を用いてループさせることができます。

第2引数として現在の index をこのように取得することができます。

{#each cats as cat, i}
	<li>
		<a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
			{i + 1}: {cat.name}
		</a>
	</li>
{/each}

お好みであれば、分割代入(each cats as { id, name })を使い、cat.idcat.nameidname に置き換えることができます。