Пример, похожий на счет-фактуру, чтобы понять реактивность вложенного объекта в массивы. Стоит ли использовать для этого магазин?

Я изо всех сил пытаюсь понять идиоматический способ создания формы, подобной счету-фактуре, с помощью Svelte 3.

Мой REPL находится здесь: https://svelte.dev/repl/7aca36569aea49bba38e5fb8b1b0835b?version=3.24.1.

ВОПРОСЫ:

  1. Это хороший способ сделать это? Может быть, мне воспользоваться магазином?

  2. Есть ли способ обновить amountDue при изменении qty и price своих строк? (Я знаю, что могу сделать это с rows = rows, но мне кажется, что это не совсем идиоматично, я ошибаюсь?)


svelte svelte-3 svelte-component svelte-store svelte-2
person Fred Hors    schedule 07.08.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вам нужен более полный ответ:

  1. Не нужно использовать магазин. Обычно это происходит, когда вы хотите связать несколько компонентов.
  2. Как предлагалось ранее, вы должны привязать значение row к параметру row строки. Вы можете использовать ярлык bind:row как псевдоним bind:row={row}.
  3. Незначительное. Логика вычисления amountDue итогов кажется некорректной, поскольку при расчете итоговой цены игнорируется количество строк.

Вот рабочий REPL с желаемым поведением: https://svelte.dev/repl/78fa09646005441a85061e6edf9886f9?version=3.24.1

person Carlos Roso    schedule 07.08.2020

arrow_upward
1
arrow_downward

Я не думаю, что вам нужно использовать хранилище (возможно, полезно для большого дерева компонентов)

Для второго вопроса вам просто нужно выполнить привязку компонента

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

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

Обратите внимание, как мы используем ключевое слово bind вместо того, чтобы просто передавать опору.

person Esteban Torres    schedule 07.08.2020