Each block bindings with nested Svelte components

58 Views Asked by At

According to Svelte documentation, I can bind values to variables like this:

<script>
    let todos = [
        {done: true},
        {done: false}
    ]
</script>

{#each todos as todo}
    <input
        type="checkbox"
        bind:checked={todo.done}
    />
{/each}

Edit: You can create bindings for components nested within the #each block like this:

{#each todos as todo}
    <TodoItem 
       bind:done={todo.done} 
    />
{/each}

Don't forget the binding to the exported value in the TodoItem component.

0

There are 0 best solutions below