空鞋带选择在 Svelte 中采用双向绑定

Question

在 Svelte 中更改相关鞋带选择之间的选项时，我无法清空先前的选择。我尝试强制 Shoelace 选择值，但它不起作用，也许我不应该使用双向绑定，或者在使用 Shoelace 和 Svelte 时还有另一种解决方法。

我有一排树，树上有树枝。

<script>
    import { trees } from './data'
    import Select from './Select.svelte'
    
    let id_trees = '1'
    let id_branches = '1'
    
    $: branches = trees.find(tree => tree.id == id_trees).branches
</script>


<Select label="Trees" bind:value={id_trees}>
   {#each trees as { id, name }}
     <sl-option value={id}>{name}</sl-option>
   {/each}
</Select>

<Select label="Branches" bind:value={id_branches}>
   {#each branches as { id, name }}
     <sl-option value={id}>{name}</sl-option>
   {/each}
</Select>

如果我从树 A 更改为 B 和 C，一切都会按预期工作：

但是如果我回到树 A，那么分支 C1 仍然存在：

这是一个最小的工作示例：

https://svelte.dev/repl/367d0371c1c34b09912f3a2a381c8234?version=4.2.10

更新

key

解决方案很棒，但它只影响渲染。我们怎样才能清空

id_branches

选择？

在相同的工作示例中，我选择了不同的 id 以表明更改树不会更改 id_branches：

https://svelte.dev/repl/94f43b27eb22435198643b2fe92206b5?version=4.2.10

Answer 1

组件似乎不会根据选项的文本内容更改进行更新（

value

可能保持不变）。

在这种情况下，一个简单的解决方法是通过

{#key}

重新创建组件的受影响部分。所以在这种情况下你可以这样做：

{#key branches}
    <Select label="Branches" bind:value={id_branches}>
       {#each branches as { id, name }}
             <sl-option value={id}>{name}</sl-option>
       {/each}
    </Select>
{/key}

这样，如果其选项列表发生更改，依赖选择将完全更新。

---

您还可以通过提供可以区分不同树的分支项目的键（

参见文档

）来强制重新创建{#each}中的选项，例如通过使用项目的对象标识：

<Select label="Branches" bind:value={id_branches}>
   {#each branches as item (item)}
     {@const { id, name } = item}
     <sl-option value={id}>{name}</sl-option>
   {/each}
</Select>

但这将导致在树更改时清除选择，即使选项

value

存在。