如何将选择输入的值与 Svelte 中动态创建的选项绑定

Question

我有一个带有选择输入的苗条组件，该组件填充了来自外部源的数据。

如何绑定选择输入以选择特定选项。

如果我将选项值或所选值设为静态，它似乎可以正常工作，但如果两者都是动态的，则无法正常工作。

这是我的代码

<script>
export let params = {}
let seasons = [];
let selected = '';
onMount(async () => {
selected = params.seasonId; 
/* fetch is called here and returns a list of seasons, which is passed to seasons array */
})
</script>
<p><select bind:value={selected}>
<option value="" disabled>-- Select Season --</option>
{#each seasons as season}
<option value={season.id}>{season.description}</option>
{/each}
</select></p>
<p>param: {params.seasonId}</p>
<p>Selected: {selected}</p>

从代码来看，这是 HTML 输出。

<p><select>
<option value="" disabled>-- Select Season --</option>
<option value="4">2019</option>
<option value="3">2018</option>
<option value="2">2017</option>
<option value="1">2016</option>
</select></p>
<p>param: 3</p>
<p>Selected: 3</p>

我希望页面加载后，选项3"2018"将被选中，但它不会改变，并且"--选择季节--"是选择的选项。

Answer 1

您应该另外设置选项selected属性：

<option value={season.id} selected={selected === season.id}>{season.description}</option>

详情请见：https://github.com/sveltejs/svelte/issues/2844

Answer 2

这应该可以正常工作。

如果没有看到更多代码，我的猜测是params.seasonId和season.id是不同类型的(一个字符串和另一个数字(

Answer 3

在这个简化的代码示例中，这似乎有效： https://svelte.dev/repl/d95c63158f944ce996aaef092e4bff73?version=3.12.1

我必须注意，如果您将初始选择值更改为

let selected = 3;

它不再起作用，因此问题在于params.seasonId