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

Question

我正在尝试使用 Element UI 的 Select 并将整个对象作为值。正如您在我的示例中看到的，所选值正在更改，但当前值的标签没有更改。我不知道为什么。另外，选择选项中的所有标签都是粗体，但只能选择一个。

脚本：

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

基于选择属性，只需添加value-key="id"到选择组件即可为选择提供唯一标识符：

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