Vue-select drop-down selection box - the content in the output box instead of the corresponding value

Project scenario:

A drop-down selection box, sometimes the backend needs the parameters we pass not only the value corresponding to the selected content, but also the selected content itself, but the v-model is usually bound to the value corresponding to the selected content

---

solution:

First look at the structure of an ordinary drop-down selection box, and the structure of the bound list

  <el-select
     v-model="value"
     placeholder="请选择"
  >
    <el-option
      v-for="(item, i) in list"
      :key="i"
      :label="item.label"
      :value="item.value"
     />
  </el-select>

   list：[ 
            {
    
    
               value: '选项1',
               label: '黄金糕'
            }, 
            {
    
    
               value: '选项2',
               label: '双皮奶'
             }
          ]

If the first

At this point: console.log(value) will get 'option 1'

Just add a ref="value" to select , you can use this.$refs.value.selected.label to get 'golden cake'

  <el-select
     ref="value"
     v-model="value"
     placeholder="请选择"
  >
    <el-option
      v-for="(item, i) in list"
      :key="i"
      :label="item.label"
      :value="item.value"
     />
  </el-select>