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