Svelte嵌套对象绑定问题：动态Fieldset表单中Select输入无法同步绑定数据

你遇到的核心问题是Svelte中原始类型（数字、字符串等）的绑定是值传递而非引用传递，导致子组件的修改无法同步回上层对象。

具体来说，在Fieldset组件的#each循环里：

{#each Object.entries(fields) as [ValueTitle, Value]}

这里的Value是fields[ValueTitle]的副本（因为数字是原始类型），你把这个副本绑定到Field的dataValue后，子组件里修改的只是这个局部副本，完全没有触达底层的fields对象属性，所以上层的fields自然不会更新。

最简单的修复方式是修改Fieldset组件，跳过解构出来的Value，直接绑定到fields对象的对应属性上：

修改Fieldset.svelte代码：

<script>
 import Field from "./Field.svelte"
 export let fields;
</script>
<form>
 {JSON.stringify(fields)}
 {#each Object.entries(fields) as [ValueTitle, _]}
 <div class="mb-4 items-center">
 <label for={ValueTitle}>{ValueTitle} </label>
 Fieldset:{fields[ValueTitle]}
 <!-- 直接绑定到fields的属性，而非副本 -->
 <Field bind:dataValue={fields[ValueTitle]} />
 </div>
 {/each}
</form>

这样修改后，Field和Selector组件绑定的是原fields对象的属性引用，任何修改都会直接同步到上层的fields中。点击按钮打印时，就能看到最新的选择值已经更新到对象里了。

如果你的Field组件需要更多上下文，可以改为传递父对象和字段名，而非单独的值：

1. 修改Field.svelte：

<script>
 import Selector from "./Selector.svelte"
 export let parent;
 export let key;
 let options = {Hans: 1, Christian: 2, Andersen:3};
</script>
Field:{parent[key]}
<Selector bind:data={parent[key]} options={options} />

2. 修改Fieldset.svelte中的调用：

<Field parent={fields} key={ValueTitle} />

这种方式同样能确保修改直接作用于原对象属性，解决同步问题。

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