首页 > 其他 > 详细

vue elementUI el-select 同时获取label 和 value 的值

时间:2020-07-02 20:04:25      阅读:850      评论:0      收藏:0      [点我收藏+]

原网址:https://blog.csdn.net/cifangling/article/details/82702982

 

<template>
<div>
<el-select v-model="fruit" @change="handleChange">
<el-option v-for="item in selectList" :key="item.whsCode" :label="item.fruitName" :value="item.fruitEnName"></el-option>
</el-select>
</div>
</template>

<script>
export default {
data(){
return {
fruit:‘‘,
selectList:[
{fruitName:‘苹果‘,fruitEnName:‘apple‘},
{fruitName:‘橘子‘,fruitEnName:‘orange‘}
]
}
},
methods:{
handleChange(val){
//传进来的val是select组件选中的value值,也就是一个fruitEnName
var obj = {}
obj = this.selectList.find(function(item){
return item.fruitEnName === val
})
//obj 就是被选中的那个对象,也就能拿到label值了。
console.log(obj.fruitName)//label值
console.log(val)//value值
}
}
}
</script>

vue elementUI el-select 同时获取label 和 value 的值

原文:https://www.cnblogs.com/liangqilin/p/13226436.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!