Svelte中如何在each循环中实现局部变量的双向绑定？

你的写法里双向绑定仅单向生效，核心是基础类型的值传递特性导致的：
你直接把foo、bar两个字符串类型的基础值放到数组中遍历，Svelte循环时拿到的v只是原始变量的值副本，不是对原始变量的引用。修改输入框时仅会更新这个临时副本的值，不会作用到外层的foo、bar变量上。而外层原始变量更新时，数组会重新计算获取最新值，所以输入框能同步到更新，最终就出现了仅单向生效的问题。

推荐优先用对象存储表单字段的方案，对象是引用传递，绑定对象属性即可实现正常的双向绑定：

1. 首先定义表单数据对象，把所有表单项对应的值作为对象属性存储

<script>
  let formData = {
    foo: '',
    bar: ''
  }
</script>

2. 循环遍历对象的键，绑定对应属性即可

{#each Object.keys(formData) as key}
<div class="form-control">
  <label for={key}>{key}</label>
  <input type="text" id={key} bind:value={formData[key]} />
</div>
{/each}

后续需要读取/修改字段值时，直接操作formData.foo、formData.bar即可，双向绑定逻辑完全正常，后续新增字段只需要在formData中加属性即可，不需要修改循环逻辑。

如果你不想调整原有变量结构，也可以用索引匹配绑定原始变量，仅适合字段少的场景：

{#each ['foo', 'bar'] as key, index}
<div class="form-control">
  <label for={key}>{key}</label>
  <input type="text" id={key} bind:value={index === 0 ? foo : bar} />
</div>
{/each}

内容的提问来源于stack exchange，提问作者JSNinja