<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-select v-model="opvalue" placeholder="请选择"> <// Here v-model value is a value obtained byel-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-button type="success" @click="getdata">提交</el-button> </div> </body> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/[email protected]/lib/index.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ on: ' #app ' , data() { return { options: [{ value: '1', label: ' gold cake ' }, { value: '2', label: ' Pinai ' }, { value: '3', label: ' omelets ' }, { value: '4', label: ' Longxumian ' }, { value: '5', label: ' Beijing Duck ' }], opvalue: '' , mylabel:'', }; }, methods: { getdata(){
//获取label值 for(let key in this.options){ if( this.options[key].value==this.opvalue){ this.mylabel=this.options[key].label } } let params={ value:this.opvalue, label:this.mylabel }; console.log(params) } }, created(){ // axios.get("./data/a.json").then(res=>{ // console.log(res.data[0]) // this.opvalue=res.data[0].label; // }).catch(err=>{ // console.log(err); // }) } }) </script> </html>
// Get the value of the checkbox in the v-model, the transfer value is the value to the value of the background.
// how to obtain the label and value at the same time it?
// how a method, there is a for loop, for loop have break, it will not jump out of the for loop, but also out of this method