Svelte: Array mutation and re-assignment not triggering re-render in #each block

Question

I don't know why this isn't updating. I'm relatively new to Svelte but I know about force updating objects arrays with the thing = thing method.

Still, I'm not sure why this doesn't re-render whatsoever? I had this as a Matrix first of all and I thought maybe there was some nestedness that was breaking it but now this is literally just a flat array. It's updating on the matrix on click but not triggering re-render.

<script>
    import Nested from './Nested.svelte';
    let matrix = new Array(9).fill(null)
    let turn = 0
    
    let handleChange = (index) => {
        if (matrix[index] != null) return
        let newColor = turn % 2 == 0 ? 'red' : 'blue'
        matrix[index]= newColor
        turn++
        matrix = matrix
    }
</script>
    {#each matrix as team, index}
        <Nested team={team} index={index} click={handleChange}/>
        {#if (index==2 || index==5)}
            <br />
        {/if}
    {/each}

Nested Component:

<script>
    export let index;
    export let click;
    export let team;
    
    let color = 'white';
    if (team) color = team;
</script>

<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        display: inline-block;
        margin: 0;
    }
</style>

<div style="background-color: {color}" on:click={(e)=>click(index)}>
    {color}
</div>

Looks like changing the if statement to a reactive statement in your Nested component fixes it $: if (team) color = team; Here's a REPL svelte.dev/repl/b3503816416240e7a66859d5fd95c00c?version=3.38.3 — JHeth
– JHeth, Commented Jul 15, 2021 at 2:19

Stephane Vanraes · Accepted Answer · 2021-07-15 06:23:40Z

7

When working with Svelte, an important thing to keep in mind is that the code in the script block is only execution when the component is created.

In your case, this means that the line if (team) color = team; only runs once (at instantiation) and never again afterwards.

If you want something to be re-executed, you have to declare it reactive using $:

For you that would become

$: if (team) color = team

This will be re-executed whenever any of the variables used (team and color) changes.

Note that you can also simply mark a variable to be reactive (Svelte injects the let for you)

export let index;
export let click;
export let team;
    
$: color = team ?? 'white'

answered Jul 15, 2021 at 6:23

Stephane Vanraes

16.5k3 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Svelte: Array mutation and re-assignment not triggering re-render in #each block

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related