javascript - Element UI select doesn't work with object as value - Stack Overflow

admin管理员组

文章数量:1312778

I am trying to use Element UI's Select with whole objects as values. As you can see in my sample, the selected value is changing but the label of current value doesn't. I have no idea why. Also, all labels in select options are bold, but it should be only selected one.

script:

data() {
  return {
    options: [
      {
        id: 1,
        type: 'USER',
        age: 15
      }, {
        id: 2,
        type: 'ADMIN',
        age: 22
      }
    ],
    value: null
  }
}

template:

  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.type"
      :value="item">
    </el-option>
  </el-select>

Demo:

I am trying to use Element UI's Select with whole objects as values. As you can see in my sample, the selected value is changing but the label of current value doesn't. I have no idea why. Also, all labels in select options are bold, but it should be only selected one.

script:

data() {
  return {
    options: [
      {
        id: 1,
        type: 'USER',
        age: 15
      }, {
        id: 2,
        type: 'ADMIN',
        age: 22
      }
    ],
    value: null
  }
}

template:

  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.type"
      :value="item">
    </el-option>
  </el-select>

Demo: https://codepen.io/peter-peter-the-typescripter/pen/qBNeKEp

• javascript
• vue.js
• vuejs2
• element-ui

Share Improve this question Follow edited Nov 23, 2020 at 21:47 Boussadjra Brahim 1 asked Nov 23, 2020 at 21:06 Denis StephanovDenis Stephanov 5,3013131 gold badges9393 silver badges189189 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Based on select-attributes just add value-key="id" to select ponent to give the select an unique identifier :

<el-select v-model="value" placeholder="Select" value-key="id">

本文标签： javascriptElement UI select doesn39t work with object as valueStack Overflow