Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Deleting keys from object in Svelte component state

$
0
0

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?


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>