Svelte 绑定选择值在获取时未更新

Question

我在 Svelte (3) 中使用以下代码从 API 获取选项。随后的 s 依赖于第一个。我的期望是，当选择填充其选项时， selectedOption 将更改为 options[0] ，但直到我手动选择另一个选项然后选择第一个选项时它才会更改。难道是我绑定错了？ AFAIK 我不需要为此使用反应变量，理论上应该像这样工作。

onmount(async () => {
    options = await getOptions()
})
let selectedOption;

<select bind:value={selectedOption}>
{#each options as option}
    <option value={option} selected={selectedOption === option}>
        {option.name}
    </option>
{/each}

Answer 1

在选择上使用

bind:value

仅在更改事件触发时更新绑定变量。由于填充选项不会触发更改事件，因此在您选择选项之前

selectedOption

不会更新。

我建议在选项完全填充之前不要渲染

<select>

。这将确保立即设置

selectedOption

。

{#if options.length > 0}
    <select bind:value={selectedOption} >
        {#each options as option}
                <option value={option} selected={selectedOption === option}>
                        {option.name}
                </option>
        {/each}
    </select>
{/if}

Answer 2

也许如果你在

selectedOption

函数执行完成后实例化

getOptions()

。并且您还应该将

selected

设置为 0 索引选项。

let selectedOption;

onmount(async () => {
    options = await getOptions()
    selectedOption = options[0]
})

<select bind:value={selectedOption}>
{#each options as option}
    <option value={option} selected={option.id == 0}>
        {option.name}
    </option>
{/each}

Answer 3

你也可以尝试像这样的 svelte 的 {#await ... } 块

<script lang="ts">
  interface IOption {
    id: number;
    name: string;
  }
  let selected: IOption;
  const getOptions = async () =>
    new Promise<IOption[]>((resolve) =>
      resolve([
        { id: 1, name: "foo" },
        { id: 2, name: "bar" },
      ])
    );

  $: console.log(selected);
</script>

<select bind:value={selected}>
  {#await getOptions() then options}
    {#each options as option}
      <option value={option} selected={option.id == 0}>
        {option.name}
      </option>
    {/each}
  {/await}
</select>

我冒昧地定义了 getOptions 方法，以便更容易测试