Svelte 每个循环都不会更新，而对象是动态更改的答案

【问题标题】：Svelte Each loop is not updated while object changed dynamicallySvelte 每个循环都不会更新，而对象是动态更改的
【发布时间】：2020-12-01 22:30:32
【问题描述】：

当我尝试动态更改每个循环变量的数据时，不会刷新 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>

sn-p 链接：https://svelte.dev/repl/887e7e2de4114ec1bb3625c264b9a62c?version=3.24.1

任何帮助将不胜感激！谢谢你:)

【问题讨论】：

标签： javascript svelte sapper svelte-3 svelte-component

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您不能仅通过在 svelte 中更改其属性来更新数组/对象。

一个简单的经验法则：更新变量的名称必须出现在赋值的左侧。

Updating Arrays and Objects

【讨论】：