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

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进行匹配
},

vue.js

0 人点赞