Vue-select ドロップダウン選択ボックス - 対応する値の代わりに出力ボックスの内容

プロジェクトのシナリオ:

ドロップダウン選択ボックス。バックエンドでは、選択したコンテンツに対応する値だけでなく、選択したコンテンツ自体も渡すパラメーターが必要になる場合がありますが、v-model は通常、選択したコンテンツに対応する値にバインドされます。

---

解決：

まず、通常のドロップダウン選択ボックスの構造とバインドされたリストの構造を見てください。

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

最初の場合

この時点: console.log(value) は「オプション 1」を取得します。

select にref="value"を追加するだけで、this.$refs.value.selected.labelを使用して「ゴールデン ケーキ」を取得できます。

  <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>