vue中同时获取select下拉框的值和文本
vue中同时获取select下拉框的值和文本
在下是首席架构师
发布于 2023-07-04 15:09:01
发布于 2023-07-04 15:09:01
代码可运行
运行总次数：0
代码可运行
vue中一般select都绑定v-model，但是v-model只保存value值，如果想同时取出option的文本，则麻烦些，下面方法目前只适用于select单选给select 加 ref属性
方法一：给select 加 ref属性
<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>insertTemplate(){
//得到选中value
console.log(this.$refs.newText.value)
//得到选中文本
console.log(this.$refs.newText.selectedSingle)
},方法二：通过change传参方式
<Select placeholder="请选择" v-model="currentTemplate" @change="insertTemplate($event)">
<Option v-for="(item,index) in templateData" :key="index" :value="item.channelId">{{item.channelTitle}}</Option>
</Select>insertTemplate(key){
//得到选中value
console.log(key)
//得到选中文本
//文本根据templateData.forEach进行匹配
},本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
