javascript - 元素 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

基于 select-attributes只需在选择组件中添加 value-key="id" 即可为选择提供唯一标识符:

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