Svelte中循环<select>组件的双向绑定实现问题

你的问题核心是没有给下拉框设置双向绑定，导致修改选项时，fruits数组里的元素属性不会同步更新。

只需要把select标签的value={fruit.fruit_id}改成双向绑定的bind:value={fruit.fruit_id}，就能让下拉框的选择直接同步到数组元素中。

修改后的完整代码如下：

<script>
    let options = [
        {"id": "fruit1", "name": "Apple"},
        {"id": "fruit2", "name": "Banana"},
    ];

    let fruits = [
        {"fruit_id": "fruit1"}
    ];

    function addFruit() {
        fruits.push({ fruit_id: "fruit1"});
        fruits = fruits;
        console.log(fruits);
    }
</script>

{#each fruits as fruit, i}
    <select bind:value={fruit.fruit_id}>
    {#each options as option}
      <option value={option.id}>{option.name}</option>
    {/each}
    </select>
{/each}

<button on:click={addFruit}>+</button>

原理很直接：Svelte中，bind:value会建立数据和表单元素的双向关联——既用数据渲染元素，也会把用户对元素的操作同步回数据。原来的写法只是单向渲染，所以修改下拉框不会改变数组里的值。

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