javascriptarrayssveltesvelte-3

Svelte 3 - How to loop each block X amount of times

I'm hoping to find a way to iterate over an #each block a set amount of times in Svelte 3. In Vue I would do something like this:

<li v-for="i in 3"><!-- somecontent --></li>

But as I understand Svelte handles loops much differently using the .length property of the array being #eached. Is there some way to pull off something like this in Svelte?

{#each 3 as i}
  <li><!-- somecontent --></li>
{/if}
Solution

  • An #each tag can loop anything with a length property, so:

    {#each {length: 3} as _, i}
    <li>{i + 1}</li>
{/each}

    will also work, if you prefer.

    Also since Svelte 5 you can drop the as

    {#each { length: 8 }, rank}
    <div>{rank}</div>
{/each}