How to loop each block on provided length – Svelte


In this article I will show how to loop each block on provided length. This could be done by using either the Array() function or length property.

Using Array() –

var superhero = ["Ironman", "Thor", "Hulk"]

{#each Array(3) as _, i}

Using Length property –

var superhero = ["Ironman", "Thor", "Hulk"]

{#each {length: 3} as _, i}

If you want to dynamically update the list with increase in element count, then use this code –

	let count = 3;

<button on:click={() => count = count + 1 }>+</button>
<button disabled={count === 1} on:click={() => count = count - 1 }>-</button>

{#each Array(count) as _, i}
    <li>{i + 1}</li>

    Tweet this to help others

Live Demo

Open Live Demo