vue填坑之el-select同时获取label和value值

在做项目的时候出现,要把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版权协议,转载请附上原文出处链接和本声明。