javascript - Svelte 绑定(bind)选择值未在获取时更新

Question

我在 Svelte (3) 中使用以下代码从 API 中获取选项。随后的 s 取决于第一个。我的期望是 selectedOption 会更改为 options[0] 当 select 填充了它的选项但它不会改变直到我手动选择另一个选项然后选择第一个。我绑定(bind)错了吗？据我所知，我不需要 react 变量，理论上应该像这样工作。

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 on a select 仅在更改事件触发时更新绑定(bind)变量。由于填充选项不会触发更改事件，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}