我有一个带有select输入的svelte组件,其中填充了来自外部源的数据。
如何绑定select输入以选择特定的选项。
如果我将选项值或所选值设为静态,似乎可以正常工作,但如果两者都是动态的,情况就不一样了。
以下是我的代码
<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 --”是被选中的选项。
发布于 2020-01-08 12:41:44
您应该另外设置options的selected
属性:
<option value={season.id} selected={selected === season.id}>{season.description}</option>
发布于 2019-10-09 10:25:08
这应该可以很好地工作。
在没有看到更多代码的情况下,我猜测params.seasonId
和season.id
属于不同的类型(一个字符串和另一个数字)
发布于 2019-10-10 11:48:07
在这个简化的代码示例中,这似乎是可行的:https://svelte.dev/repl/d95c63158f944ce996aaef092e4bff73?version=3.12.1
我必须注意到,如果将初始选择的值更改为
let selected = 3;
它不再工作,所以问题出在params.seasonId
的值上
https://stackoverflow.com/questions/58301570
复制