I need to iterate over an object. The object is declared with:
const obj = $state({
one: { checked: true },
two: { checked: false },
three: { checked: true }
});
In my Svelte templating code, I do this:
{#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}
Checking the checkbox does update the value of one of the items of my object, but does not change the value of {value.checked} in the DOM. My suspicion is that obj itself is reactive, but value within obj is not. How do I fix this?
(Note: I’m actually using Ionic and <ion-toggle> instead of <input type="checkbox"> – I know there is a better way to bind the value (bind:value), but this method works throughout the rest of my app for <ion-toggle>.)
I have also attempted making the obj a SvelteMap<string, ClassVersion>, where ClassVersion is:
class MyObj {
checked = $state(false);
}
