[Question] An idiomatic way to create an Invoice-like form. Should I use stores?

[frederikhors]

I'm trying my best to understand the idiomatic way to create an Invoice-like form with Svelte 3.

My REPL is here: https://svelte.dev/repl/7aca36569aea49bba38e5fb8b1b0835b?version=3.24.1.

QUESTIONS:

1. Is this a good way to do it? Should I use a store perhaps?

2. Is there a way to update amountDue when I change qty and price of my rows? (I know I can do it with rows = rows but it seems to me a bit not-idiomatic way, am I wrong?)

[swyxio]

interesting.

1. it's fine. using stores is always optional.

2. this is pretty much the main footgun of svelte. rows=rows is fine. @kevmodrome whats the list of ways to deeply update objects within arrays again? i feel like we have a recipe for that somewhere

[frederikhors]

2. i feel like we have a recipe for that somewhere

I searched. No luck.

[swyxio]

@frederikhors there is an old issue here #15

which links to this fundamental change in svelte behavior https://github.com/svelte-society/recipes-mvp/pull/37/files

and this code sample https://github.com/svelte-society/recipes-mvp/pull/16/files

havent tried on your case but see if it helps

[frederikhors]

@sw-yx thanks. I read everything. Your work in the community is truly amazing and it's a nice gesture in this sad world. Thanks for all your commitment.

I remain skeptical and looking for answers regarding inputs and bind-things like bind:value={row.qty}.

I'm loving Svelte, there must be a way to do this.

😄

[frederikhors]

Oh, I think I found.

I'm using: bind:value={rows[id].qty}.

Am I wrong?

[frederikhors]

I think I can use bind:value={rows[id].qty} but it seems still hacky to me.

Is there a way to use something like: bind:value={row.qty} and still correctly update rows array?

[swyxio]

doubt it, bc the updater function doesnt know that row is a reactive variable? i could be wrong. the way to test this is look at the compiled output in the svelte REPL and see what the invalidate function is doing. lmk if u get stuck, im feeling a little lazy to do it myself

[frederikhors]

@sw-yx they answered here: sveltejs/svelte#5248 (comment).

The solution is bind:row.

Shame on me. 😞