如何反复地迭代物体？

Question

我需要迭代一个物体。该对象的声明：

const obj = $state({ 
    one: { checked: true }, 
    two: { checked: false }, 
    three: { checked: true } 
});

在我的Svelte模板代码中，我这样做：

{#each Object.entries(obj) as [key, value]}
        <div class="mb-8">
            {key}: {value.checked}
            <input type="checkbox" {value} onchange={e => obj[key].checked = e.target.checked}>
        </ion-toggle>
    </div>
{/each}

检查复选框does更新了我对象的一个项目的值，但确实会更改DOM中{value.checked}

的值。我的怀疑是

obj

本身是反应性的，但是

value

内部不是。我该如何解决？

（注意：我实际上使用离子和

obj

而不是

<ion-toggle>

-我知道有一种更好的方法来绑定该值（

<input type="checkbox">

），但是此方法在我的其他应用程序的其余部分中都可以使用。）

我还尝试制作

bind:value

<ion-toggle>

，classversion是：

obj

这应该像预期的那样工作。

确保设置所有相关属性，以确保数据不会超出同步，例如在这里，您没有设置

SvelteMap<string, ClassVersion>

属性，因此只能向外传播更改。

Answer 1