3

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

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

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

这是我的代码

<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”，但不会更改，并且“-- Select Season --”是已选择的选项。

4

3 回答 3

2

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

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

详细信息：https ://github.com/sveltejs/svelte/issues/2844

于 2020-01-08T12:41:44.357 回答
0

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

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

let selected = 3;

它不再起作用，所以问题在于 params.seasonId

于 2019-10-10T11:48:06.767 回答
0

这应该可以正常工作。

在没有看到更多代码的情况下，我的猜测是params.seasonId并且season.id是不同类型的（一个字符串和另一个数字）

于 2019-10-09T10:25:07.593 回答