我有一个包含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 实时显示了问题 - 输入第二个输入不会更新文本,而在循环之外它可以正常工作。我怎样才能让它正确地重新渲染?