I have a simple object in state, string -> objects. My UI renders the keys and values in a loop. Each object has a delete button. On click, I want to delete keys (or set them to undefined) such that the UI updates.
This page in the Svelte tutorial says:
A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment. For example this...
const obj = { foo: { bar: 1 } };const foo = obj.foo;foo.bar = 2;
...won't trigger reactivity on obj.foo.bar, unless you follow it up with obj = obj.
Sure enough, if I handle the click like:
{#each Object.entries(objInState) as [key, value]} {value}<button on:click={_ => delete objInState[key]}{/each}
... the page misbehaves and doesn't immediately update. (Same with setting to undefined.)
And sure enough, when I change that to:
{#each Object.entries(objInState) as [key, value]} {value}<button on:click={_ => { delete objInState[key] objInState = objInState }}{/each}
... it works.
But it's so ugly and confusing to read. Is there any better way?