在做项目的时候出现,要把value值传到后台,但是前端组件(比如表格)要显示label值的情况,但是v-model只能取到value的值,所以在思考要怎么把label值也一起取上,下面是解决方法:
Vue:
<el-select
v-model="addMessageForm.messageSource"
clearable
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="`${item.name}|${item.id}`"
>
</el-option>
</el-select>
<script>
data(){
return{
options:[], //el-select的选项,这边我是调了接口,传值进去的
addMessageForm:{
messageSource: "", //el-option中的value
messageSourceId: "", //要取到的value值
messageSourceName: "", //要取到的label值
}
}
},
methods{
getLabelValue(){
//重点!
if(this.messageSource){ //判断是否有值
[this.addMessageForm.messageSourceName,this.addMessageForm.messageSourceId] =this.addMessageForm.messageSource.split("|")
}
}
}
</script>
我们要取到的是label——item.name和value——item.id,因为v-model只能取到value,所以我们一开始,就把label和value的值都放进value中,用“|”隔开,之后在JavaScript中,用split把合在一起的值分开,就能分别得到label和value的值了。
版权声明:本文为pandorla_sweety原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。