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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！