Cuadro de selección desplegable Vue-select: el contenido en el cuadro de salida en lugar del valor correspondiente

Escenario del proyecto:

Un cuadro de selección desplegable, a veces el backend necesita los parámetros que pasamos no solo el valor correspondiente al contenido seleccionado, sino también el contenido seleccionado en sí mismo, pero el modelo v generalmente está vinculado al valor correspondiente al contenido seleccionado

---

solución:

Primero mire la estructura de un cuadro de selección desplegable ordinario y la estructura de la lista enlazada

  <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: '双皮奶'
             }
          ]

si el primero

En este punto: console.log(value) obtendrá la 'opción 1'

Simplemente agregue un ref="value" para seleccionar , puede usar this.$refs.value.selected.label para obtener '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>