元素 UI select 不适用于对象作为值

Question

我正在尝试将元素 UI 的 Select 与整个对象一起用作值。正如您在我的示例中看到的那样，selected 值正在发生变化，但当前值的标签没有变化。我不知道为什么。此外，select 选项中的所有标签都是粗体，但它应该只是 selected 一个。

脚本：

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

模板：

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

演示： https://codepen.io/peter-peter-the-typescripter/pen/qBNeKEp

Answer 1

基于 select-attributes 只需将 value-key="id" 添加到 select 组件即可为 select 提供唯一标识符：

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

元素 UI select 不适用于对象作为值

Element UI select doesn't work with object as value

javascript

vue.js

vuejs2

element-ui