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

【问题标题】：Svelte binded select value is not updating on fetchSvelte 绑定选择值未在获取时更新
【发布时间】：2021-05-16 11:25:18
【问题描述】：

我在 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}

【问题讨论】：

标签： javascript html binding svelte

【解决方案1】：

在 select 上使用 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}

【讨论】：

对不起，我应该在我的问题上添加这个，但我确实在模板中有一个条件，但这可能是错误的，因为我正在做 {#if options} 而不是 {#if options .length > 0} 这可能会让事情变得不稳定。
options 初始化为什么？如果它为 null 或未定义，则 {#if options} 将为 false。如果它是一个空数组，那么 {#if options} 将为真，<select> 将在选项完全填充之前呈现。

【解决方案2】：

如果你在 getOptions() 函数完成执行后实例化 selectedOption。您还应该将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}

【讨论】：