Компонент Svelte не выполняет рендеринг с новыми значениями, если ввод текста находится внутри каждого цикла

У меня есть редактор, который содержит входы внутри each петля. Когда текст внутри ввода изменяется, доступное для записи хранилище обновляется, но в другом компоненте, где я зацикливаюсь на значениях из хранилища, повторная визуализация не запускается.

<script>
    import { writable } from "svelte/store";
    const invoiceItems = writable([
         {
             id: 0,
             text: "Test",
        }
    ]);
</script>
<input 
    type="text" 
    bind:value={$invoiceItems[0].text} 
    on:keyup={() => {console.log($invoiceItems[0].text);}} 
/>
{#each $invoiceItems as item, index (item.id)}
    <input 
        type="text" 
        bind:value={item.text} 
        on:keyup={() => {console.log($invoiceItems[0].text);}} 
    />
{/each}
{#each $invoiceItems as { id, text }}
    <div>{id}{text}</div>
{/each}
<div>
    {$invoiceItems[0].text}
</div>

REPL: https://svelte.dev/repl/0fa5f5cd1ee247afbbdc9a77266fb4f8?version=3.9.1

Приведенный выше REPL показывает проблему в реальном времени - при наборе во втором вводе тексты не обновляются, в то время как вне цикла это работает нормально. Как я могу заставить это перерисовать должным образом?

0 ответов

Другие вопросы по тегам