Invoice-like example to understand reactivity of nested object in arrays. Should I use a store for this?

Question

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?)

Answer 1

In case you need a more complete answer:

1. No need to use a store. That's normally the case for when you want to communicate several components.
2. As proposed earlier, you should bind the row value to the Row's row prop. You can use the shortcut bind:row as an alias of bind:row={row}.
3. Minor: The logic to calculate amountDue total seems flawed as it ignores the row quantity to calculate the total price.

Here's a working REPL with the desired behavior: https://svelte.dev/repl/78fa09646005441a85061e6edf9886f9?version=3.24.1

Answer 2

I don't think you need to use a store (probably useful for a large tree of components)

For the second question, You just need to do a component binding

https://svelte.dev/tutorial/component-bindings

{#each rows as row}
    <Row bind:row />
{:else}
    Still no rows.
{/each}

Notice how we use the bind keyword instead of just passing the prop