Svelte：使用对象作为值时预先选择选择输入选项 [英] Svelte: pre-selecting a select input option when using objects as values

问题描述

我有几个围绕普通选择字段构建的组件，这些组件在我最近更新Svelte之前一直运行得很好。

我使用对象作为值，Svelte似乎很好地支持这一点。以前，这还会在选择字段中预先选择匹配选项。但是，现在它只将SELECT显示为空。

在此示例中，如何让选择字段显示已存储在chosen中的选项？

<script>
    let opts = [
        {pk:1, name:"first"},
        {pk:2, name:"second"},
        {pk:3, name:"third"},
    ]
    let chosen = {pk:2, name:"second"}
</script>

<select bind:value={chosen}>
    {#each opts as opt}<option value={opt}>{opt.name}</option>{/each}
</select>
<hr>
chosen: &lbrace;pk: {chosen.pk}, name:"{chosen.name}"&rbrace;

更新看起来我可能遇到了一个已知问题：

select option with default selection.... broken in 3.42?

更重要的是，我认为这突显了我对Svelte的理解上的差距...这里的选择是由身份而不是平等决定的(取自对该问题的评论)：

绑定到对象可以很好地工作，但所选变量需要是对所需值的引用(而不是不同的对象副本)，这样严格的相等比较才能起作用。

推荐答案

您应该对option值和select绑定变量使用标量：

<script>
    let opts = [
        {pk:1, name:"first"},
        {pk:2, name:"second"},
        {pk:3, name:"third"},
    ]
    let chosen = 2
    $: current = opts.find(opt => opt.pk === chosen)
</script>

<select bind:value={chosen}>
    {#each opts as opt}<option value={opt.pk}>{opt.name}</option>{/each}
</select>
<hr>
chosen: &lbrace;pk: {current.pk}, name:"{current.name}"&rbrace;

这篇关于Svelte：使用对象作为值时预先选择选择输入选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！