问题描述
当我尝试动态更改每个循环变量的数据时,不会刷新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>
代码段链接:https://svelte.dev/repl/887e7e2de4114ec1bb3625c264b9a62c?version=3.24.1
任何帮助将不胜感激!谢谢:)
解决方法
仅通过在svelte中更改其属性就不能更新数组/对象。
,一条简单的经验法则:已更新变量的名称必须出现在赋值的左侧。
map
返回一个新数组,如果您是从undefined
获得一个新数组,则需要分配结果并正确返回新对象
function test(){
messages = messages.map(obj => ({
...obj,checked: true
}));
}