Svelte Each loop is not updated while object changed dynamically

Question

When i'm trying to change data dynamically of the each loop variable is not refreshing the DOM elements. How I can redraw the each loop values

<script>
    // default messages object
     let messages =[{
    "name":"John",
    "message":"Hi",
         "checked": false
  },
  {
    "name":"Anthony",
    "message":"welcome",
         "checked": true
  },
  {
    "name":"David",
    "message":"thank you",
         "checked": false
  }]
 //click function to change the values dynamically 
function test(){
     messages.map(ob=>{
        ob.checked = true;
    })
    console.log(messages)
}
</script>

template code

<div>
    {#each messages as m}
    <div>{m.checked}
        <input type="checkbox" bind:checked={m.checked}>
            {m.name}
        </div>
    {/each}
    <br>
    <button on:click={()=>{test()}}> check all values</button>
</div>

link for snippet: https://svelte.dev/repl/887e7e2de4114ec1bb3625c264b9a62c?version=3.24.1

Any help would be appreciated! Thank you :)

Zmen Hu · Accepted Answer · 2020-08-12 07:55:38Z

12

You can't update an array/object just by changing its attribute in svelte.

A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment.

Updating Arrays and Objects

answered Aug 12, 2020 at 7:55

Zmen Hu

8054 silver badges12 bronze badges

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

1 Comment

Yeronimo Over a year ago

An actual example might help here. The documentation does not provide an example of this scenario

Nikita Madeev · Accepted Answer · 2020-08-12 07:50:49Z

2

map returns a new array, in your case you got a new array from undefined, you need assign the result and correctly return the new object

function test(){
    messages = messages.map(obj => ({
        ...obj,
        checked: true
    }));
}

answered Aug 12, 2020 at 7:50

Nikita Madeev

4,49012 silver badges23 bronze badges

1 Comment

Vincent Lab Over a year ago

messages = [...messages];

Collectives™ on Stack Overflow

Svelte Each loop is not updated while object changed dynamically

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related