当对象动态更改时，Svelte Each 循环不会更新

Question

当我尝试动态更改每个循环变量的数据时，并未刷新 DOM 元素。我如何重绘每个循环值

<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>

模板代码

<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 片段：https://svelte.dev/repl/887e7e2de4114ec1bb3625c264b9a62c?version=3.24.1

如有任何帮助，我们将不胜感激！谢谢:)

Answer 1

map returns 一个新数组，在您的情况下，您从 undefined 获得了一个新数组，您需要分配结果并正确 return 新对象

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

Answer 2

您不能仅通过更改 svelte 中的属性来更新 array/object。

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

当对象动态更改时，Svelte Each 循环不会更新

Svelte Each loop is not updated while object changed dynamically

javascript

svelte

sapper

svelte-3

svelte-component