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

Posted 2023-02-23

【中文标题】Svelte 绑定选择值未在获取时更新

【英文标题】：Svelte binded select value is not updating on fetch

【发布时间】：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

【参考方案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