如何使用Svelte中动态创建的选项绑定select输入的值
如何使用Svelte中动态创建的选项绑定select输入的值
提问于 2019-10-09 09:56:11
我有一个带有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 --”是被选中的选项。
回答 3
Stack Overflow用户
发布于 2020-01-08 12:41:44
您应该另外设置options的selected属性：
<option value={season.id} selected={selected === season.id}>{season.description}</option>Stack Overflow用户
发布于 2019-10-09 10:25:08
这应该可以很好地工作。
在没有看到更多代码的情况下，我猜测params.seasonId和season.id属于不同的类型(一个字符串和另一个数字)
Stack Overflow用户
发布于 2019-10-10 11:48:07
在这个简化的代码示例中，这似乎是可行的：https://svelte.dev/repl/d95c63158f944ce996aaef092e4bff73?version=3.12.1
我必须注意到，如果将初始选择的值更改为
let selected = 3;它不再工作，所以问题出在params.seasonId的值上
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58301570
复制相关文章
相似问题
腾讯云开发者
