Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用Svelte中动态创建的选项绑定select输入的值

如何使用Svelte中动态创建的选项绑定select输入的值
EN

Stack Overflow用户
提问于 2019-10-09 09:56:11
回答 3查看 4.4K关注 0票数 3

我有一个带有select输入的svelte组件,其中填充了来自外部源的数据。

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

如果我将选项值或所选值设为静态,似乎可以正常工作,但如果两者都是动态的,情况就不一样了。

以下是我的代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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输出。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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 --”是被选中的选项。

EN

回答 3

Stack Overflow用户

发布于 2020-01-08 12:41:44

您应该另外设置options的selected属性:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <option value={season.id} selected={selected === season.id}>{season.description}</option>

详情请访问:https://github.com/sveltejs/svelte/issues/2844

票数 2
EN

Stack Overflow用户

发布于 2019-10-09 10:25:08

这应该可以很好地工作。

在没有看到更多代码的情况下,我猜测params.seasonIdseason.id属于不同的类型(一个字符串和另一个数字)

票数 0
EN

Stack Overflow用户

发布于 2019-10-10 11:48:07

在这个简化的代码示例中,这似乎是可行的:https://svelte.dev/repl/d95c63158f944ce996aaef092e4bff73?version=3.12.1

我必须注意到,如果将初始选择的值更改为

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let selected = 3;

它不再工作,所以问题出在params.seasonId的值上

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58301570

复制
相关文章
满足 Google Play 目标 API 等级 (targetSdkLevel) 的要求
从 2018 年 8 月起,所有向 Google Play 提交的新应用都必须针对 Android 8.0 (API 等级 26) 开发。2018 年 11 月起,所有 Google Play 的现有应用更新同样必须针对 Android 8.0。 Android 每次版本更新都会作出变更,显著提升应用安全性以及性能并改善整体用户体验。其中部分变更仅适用于那些通过 manifest 文件中的 targetSdkVersion 属性 (即目标 API 等级) 明确指出支持新版 API 行为的应用。 请将您的应用
Android 开发者
2018/05/31
8.7K0
一起看 I/O | Android 开发工具最新更新
作者 / Juan Sebastian Oviedo, Senior Product Manager
Android 开发者
2022/09/01
9K0
一起看 I/O | Android 开发工具最新更新
SDK开发经验之版本
本来想在周末写完,结果周末打扰,到现在才开始。要加班了,不然写不完。…… 任何产品都有迭代,有周期,有版本,版本是一个阶段工作的里程碑和产出。 ​ 对于应用开发者,更新版本可能是件很开心的事,因为说明在不断的优化和改进。然而对于SDK开发者来说,对于版本更新的感觉却是复杂的,开心又心塞。 开心是因为又修复了不少问题,或者出了新的功能,做了新的优化。但是更多的是多版本维护带来的压力和成本。SDK一个版本的生命周期并不像应用那么短,而且他带来的问题的影响也会更久远。 本来想和关于版本号的那篇一起写完,发现有点多
子勰
2018/05/22
1.9K0
如何停止一个正在运行的线程?
停止一个线程意味着在任务处理完任务之前停掉正在做的操作,也就是放弃当前的操作。停止一个线程可以用Thread.stop()方法,但最好不要用它。
Java技术栈
2020/02/26
1.9K0
Google 的 Firebase 如何删除项目
https://www.ossez.com/t/google-firebase/13792
HoneyMoose
2021/11/02
3.2K0
Google 的 Firebase 如何删除项目
微信JS-SDK签名接口的使用与开发
最近诸事缠身好久没有写文章了。前不久将与微信公众号有关的一些知识点进行了梳理,微信公众号开发过程中,用最多的就是微信js-sdk了。但是使用微信js-sdk需要获取签名、时间戳、随机字符串,等等一系列的参数,那问题就来了,这些参数是由后端提供能,还是前端自己获得呢?当然是先由后端获,然后向前端工程师提供一个接口,只不过这个接口返回的是jsapi_ticket还是计算好的签名signature,这个就得由前后端工程师协商了,一般为了方便,我的做法是直接返回计算好的签名。
挥刀北上
2019/07/19
7.6K0
微信JS-SDK签名接口的使用与开发
Firebase 如何创建登录 Token
Firebase 的 token 可以使用 firebase 命令行工具来进行创建。
HoneyMoose
2021/04/02
2.5K0
Firebase 如何创建登录 Token
应用上云2小时烧掉近50万,创始人:差点破产,简直噩梦
简介:本文讲述了我们在首款产品上市之前就差点破产、最后幸存下来并从中汲取教训的故事。
CloudBest
2021/03/12
42.8K0
应用上云2小时烧掉近50万,创始人:差点破产,简直噩梦
使用NVIDIA SDK Manager定制您自己的Jetson系统
如果您是一位使用NVIDIA Jetson开发套件的开发者,您可能已经熟悉NVIDIA SDK Manager。这是一个强大的工具,简化了NVIDIA JetPack SDK的安装过程,让您可以快速设置开发环境,并立即开始项目。但是,您是否知道SDK Manager现在提供了更多的灵活性和定制化选项?让我们深入了解详情,探索如何根据您的特定需求定制安装过程。
GPUS Lady
2023/08/08
7040
使用NVIDIA SDK Manager定制您自己的Jetson系统
微信JS-SDK的使用
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
越陌度阡
2020/11/26
16.9K0
腾讯警告:你的声音正在被AI「偷走」
近日,腾讯朱雀实验室受邀参加全球顶级信息安全峰会 CanSecWest 2021,并进行了题为《The Risk of AI Abuse: Be Careful with Your Voice(AI 被滥用的风险:小心您的声音安全》的分享。腾讯朱雀实验室分享的最新研究成果表明,VoIP 电话劫持与 AI 语音模拟技术的结合将带来极大潜在风险。
机器之心
2021/04/21
6620
腾讯警告:你的声音正在被AI「偷走」
面试官:如何停止一个正在运行的线程?
如何停止一个线程?如果你悄悄问问你同事,70% 的人可能回答不出来。今天我们在一起复习一下,如何停止一个线程!
业余草
2021/12/06
1.1K0
停止使用非版本控制的可执行代码
一般来说,人们会在local_settings.py文件中加入一些配置变量,然后加入到.gitignore里面。因此,本地开发环境,你的项目需要一个脱离版本控制的可执行代码文件。
py3study
2020/01/16
6130
完全停止Oracle中正在运行的JOB
源地址:http://www.quest-pipelines.com/newsletter-v4/0403_C.htm
用户1148526
2019/05/25
1.6K0
如何在低版本SDK调用高版本API?
随着Android SDK版本不断的迭代更新,在新的SDK上总是会出现让人眼前一亮非常方便好用的API。但是这些新的API呢在低版本的SDK上是没有的,所以当我们的minSdkVersion的版本低于新API所在的版本时,我们直接使用新API在编译时会出现报错。如果只是想解决编译报错的问题呢,Android给我们提供了两种注解的方式避免编译时报错:
吴延宝
2018/09/10
5K1
firebase怎么用_firebase是什么
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/168361.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/20
4.2K0
firebase怎么用_firebase是什么
如何打造一款标准的 JS SDK ?
岳鹰全景监控,是阿里UC官方出品的先进移动应用线上监控平台,为开发者及企业提供一套完整的移动应用线上质量监控解决方案。岳鹰WEB前端监控,可实时监控页面性能、JS异常、资源加载异常、API成功率、自定义错误等异常情况。本文通过岳鹰前端监控SDK的实际案例,介绍如何基于JavaScript来开发SDK,并分享一些设计原则以及实现技巧。
ConardLi
2021/04/07
1.3K0
如何打造一款标准的 JS SDK ?
Javascript实现计数器,定时警告和停止
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>定时警告</title> 5 </head> 6 <body> 7 <!
别先生
2017/12/29
9210
Javascript实现计数器,定时警告和停止
腾讯一面:如何停止一个正在运行的线程?
停止一个线程意味着在任务处理完任务之前停掉正在做的操作,也就是放弃当前的操作。停止一个线程可以用Thread.stop()方法,但最好不要用它。虽然它确实可以停止一个正在运行的线程,但是这个方法是不安全的,而且是已被废弃的方法。在java中有以下3种方法可以终止正在运行的线程:
一行Java
2023/02/23
9320
腾讯一面:如何停止一个正在运行的线程?
js停止setInterval 调用
setInterval()返回一个interval ID,您可以将其传递给clearInterval():
IT工作者
2022/01/18
13.8K0

相似问题

警告:看起来您正在使用Firebase JS的开发构建

63

如何修复Firebase警告“您正在使用Firebase的开发版本”

113

警告:“看起来您正在使用Firebase的开发构建。”

11

警告“看起来您正在使用Firebase JS SDK的开发构建”,并在角火基应用程序中进行了警告

12

如何避免Firebase警告我正在使用开发版本?

18
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文