在 Svelte 中绑定动态和依赖选择答案

【问题标题】：Binding dynamic and dependent selects in Svelte在 Svelte 中绑定动态和依赖选择
【发布时间】：2021-08-15 18:00:38
【问题描述】：

我有一个选择组件，其选项取决于第二个选择组件的值。我希望第一个选择的选定值成为动态提供的选项中的第一个。

Here is a REPL that illustrates the issue。选项已更新，但所选值未在父 App 组件中更新。此外，当您首先从右侧下拉菜单中选择第二个或第三个选项，然后更改左侧的选项时，它不是在右侧选择的第一个选项。

This REPL has it working, but without the selects being child components.

有一个与此相关的 Svelte 错误，但在 Svelte 3.23 中已解决，请参阅 here

任何解决方案或解决方法将不胜感激。

【问题讨论】：

标签： svelte

【解决方案1】：

要回答您的第二个问题：您需要为 select 元素中的每个选项元素设置一个键。只有当数据发生变化时Svelte can diff the list。

ChildSelect.svelte 将因此更改为

<select bind:value={selectedChild}>
  {#each selectedParent.children as option (option.id)}
    <option value={option}>
      {option.text}
    </option>
  {/each}
</select>

【讨论】：

【解决方案2】：

您的代码构建方式，似乎您希望在更改ParentSelect 时更新App.svelte 中的selectedChild 的值。为此，您必须在使用 ParentSelect 时绑定到它：

// App.svelte
<!--Old code-->
<!--<ParentSelect bind:selectedParent {selectedChild}></ParentSelect>-->

<!--New code-->
<ParentSelect bind:selectedParent bind:selectedChild></ParentSelect>

这样你最终会绑定selectedChild 两次（在ParentSelect 和ChildSelect 中），但我已经在你的repl 中尝试过，它似乎有效。

【讨论】：