Vue.js Select顯示label

vue.js vue html css javascript

apple872828 2020-09-28 16:40:58 ‧ 4225 瀏覽

分享至

嗨大家，
我是一個Vue的新手，
最近遇到一個問題，
我利用element-ui建立了一個select的物件，
然後想要在下方顯示我選中物件的label，
但因為vue預設中，select的v-model存入的只有選項的value，
因此如果我寫
HTML:

<template>
  <el-select v-model="value" :options="options" label="Standard" filterable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  {{ value }}
</template>

JS:

var Main = {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

顯示會如下圖:

但我找到另一個Vue的套件Quasar，
他的select的v-model存入的會是整個option，
因此如果用上方的程式碼顯示的話會如下圖:

這樣一來要顯示label就容易多了，
{{ value.label }}就可以了，

請問大家，
我一樣還是想用element-ui，有沒有什麼方法是可以像Quasar一樣存入v-model是存整個option，
或者其他可以顯示label的方法呢?
謝謝!

listennn08 iT邦高手 5 級 ‧ 2020-09-28 16:59:34 檢舉

v-model 會以你 option 的 value 作為監聽的對象
那你直接傳入物件不就可以顯示 label 了嗎?
:value="item"

apple872828 iT邦新手 5 級 ‧ 2020-09-28 17:27:27 檢舉

挖看來我腦袋太死板了，這都沒有想到，謝謝你!解決了!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

theRookie

iT邦新手 1 級 ‧ 2020-09-30 09:48:27

最佳解答

如果是用element ui 留言區的解答可能還是會出bug
要給他一個value-key告知組件使用哪個屬性當做每個object的ID才能正常運作

<el-select
    placeholder="请选择"
    value-key="objId"
    v-model="selectedObj">
        <el-option
            v-for="item in objList"
            :key="item.objId"
            :label="item.name"
            :value="item"
        ></el-option>
</el-select>