前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中同时获取select下拉框的值和文本

vue中同时获取select下拉框的值和文本

作者头像
在下是首席架构师
发布2023-07-04 15:09:01
8480
发布2023-07-04 15:09:01
举报
文章被收录于专栏:从入门到出门从入门到出门

vue中一般select都绑定v-model,但是v-model只保存value值,如果想同时取出option的文本,则麻烦些,下面方法目前只适用于select单选给select 加 ref属性

方法一:给select 加 ref属性

代码语言:javascript
复制
<Select placeholder="请选择" v-model="currentTemplate" ref="newText" @change="insertTemplate">
	<Option v-for="(item,index) in templateData" :key="index" :value="item.channelId">{{item.channelTitle}}</Option>
</Select>
代码语言:javascript
复制
insertTemplate(){
	//得到选中value
	console.log(this.$refs.newText.value)
	//得到选中文本
	console.log(this.$refs.newText.selectedSingle)
},

方法二:通过change传参方式

代码语言:javascript
复制
<Select placeholder="请选择" v-model="currentTemplate" @change="insertTemplate($event)">
	<Option v-for="(item,index) in templateData" :key="index" :value="item.channelId">{{item.channelTitle}}</Option>
</Select>
代码语言:javascript
复制
insertTemplate(key){
	//得到选中value
	console.log(key)
	//得到选中文本
	//文本根据templateData.forEach进行匹配
},

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档