svelte - 如何绑定(bind)使用 Svelte let 指令声明的变量？

Question

我正在尝试解决“无法绑定(bind)到使用 let: 指令声明的变量”错误。

// FancyList.svelte
<script>
    export let items = []   
</script>

<ul>
    {#each items as item, i}
        <li><slot item={item}></slot></li>
    {/each} 
</ul>

// App.svelte
<script>
    import FancyList from './FancyList.svelte'
    let items = [ {x: 'AX', y: 'AY'}, {x: 'BX', y: 'BY'}, {x: 'CX', y: 'CY'}]
</script>

<FancyList bind:items={items} let:item={item}>
    <input type=text bind:value={item.x}>
    <input type=text bind:value={item.y}>
</FancyList>

可用 Svelte REPL

到目前为止我尝试过的事情

1) 制作 FancyList传递项目索引而不是项目本身并绑定(bind) items[index]而不是 item .

<FancyList items={items} let:index={index}>
    <input type=text bind:value={items[index].x}>
    <input type=text bind:value={items[index].y}>
</FancyList>

可用 Svelte REPL

这最初会正确呈现，但会在输入值更改时发出“ReferenceError:索引未定义”错误。

2) 制作 FancyList通过 onChange回调而不使用 bind .

<FancyList bind:items={items} let:item={item} let:onChange={onChange}>
    <input type=text value={item.x} on:input={e => onChange({...item, x: e.target.value})}>
    <input type=text value={item.y} on:input={e => onChange({...item, y: e.target.value})}>
</FancyList>

可用 Svelte REPL .

这可行，但要冗长得多。

Answer 1

这是一个错误，您的第一次解决方案尝试没有奏效 - 我有 raised an issue .另一种可能的解决方法是将更新逻辑放在父组件中，这样子组件就不需要对父组件有任何特殊的了解:https://svelte.dev/repl/2d13c33c34f445d99618fbb1bc8bebb9?version=3.6.1 .它与您的第二个解决方案大致相同，详细程度。