绑定嵌套对象 Select Svelte

Question

我正在尝试创建动态 Fieldset 表单数据，但 select 输入不会更改绑定数据

我做了这个回复 https://svelte.dev/repl/0dff600bd5134fb59d19e6ca4cb98fe6?version=3.48.0

<script>
    import Fieldset from "./Fieldset.svelte"
    let name = 'world';
    let fields = {Connection: {Setting1 : 1, Setting2 : 2 }}
</script>

<h1>Hello {name}!</h1>

<Fieldset bind:fields={fields.Connection}/>
<button on:click={()=> console.log(fields) }>
    Button
</button>

然后是我的 Fieldset

 <script>
        import Field from "./Field.svelte"
        export let fields;
    </script> 
    <form>
        {JSON.stringify(fields)}
        {#each Object.entries(fields) as [ValueTitle, Value]}
            <div class="mb-4 items-center">
                <label for={ValueTitle}>{ValueTitle} </label>
                Fieldset:{Value}
                <Field bind:dataValue={Value} />
            </div>
        {/each}
    </form>

字段：

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

最后 select或

 <script>
 export let data;
 export let options;
 </script>
    
  <select
  bind:value={data}    
  >
  {#each Object.entries(options) as [k, val]}
     <option class="p-2" value={val}>{k}</option>
  {/each}
  </select>

第一层的数据发生了变化，但不是一直都在变化这是为什么，我做错了什么

Answer 1

使用 Object.entries 创建与源分离的新对象。如果修改原始结果，源对象将不会受到影响。

如果要修改对象的属性，则必须将对象作为 whole/use 具有属性路径或索引的对象传入。

例如

<!-- In Fieldset -->
{#each Object.keys(fields) as key}
    <div class="mb-4 items-center">
        <label for={key}>{key}</label>
        Fieldset:{fields[key]}
        <Field bind:dataValue={fields[key]} />
    </div>
{/each}

绑定嵌套对象 Select Svelte

Binding Nested Object Select Svelte

binding

svelte