如何自定义 vuetify 的 v-select 语句的值？

Question

我正在尝试将对象数组传递给 v-select :items。我想显示每个选项的对象名称。我的角色格式如下 [{ id: '1', name: 'admin' }, { id: '2', name: 'guest' } ]

这是我的 vuetify 代码

<v-select
    :items="roles"
    v-model="value"
    label="Select Role"
 ></v-select>

上面的代码returns这个视图

如何显示角色名称而不是[对象对象]

Answer 1

您需要使用以下格式的数组

{
  text: string | number | object
  value: string | number | object
}

所以，在你的情况下 roles 应该是一个类似于下面的数组

roles: [
  {
    text: 'Role A'
    value: 'role-a'
  },
  {
    text: 'Role B'
    value: 'role-b'
  },
  {
    text: 'Role C'
    value: 'role-c'
  }
]

此外，如果您的文本和值相同，那么您可以使用 shorthand 格式，如下所示

roles: ['Role A','Role B','Role C']

文档：https://vuetifyjs.com/en/components/selects/

Answer 2

使用 item-name 和 item-value 道具

<v-select
    :items="roles"
    item-text="name"
    item-value="id"
    v-model="value"
    label="Select Role"
 ></v-select>

如何自定义 vuetify 的 v-select 语句的值？

How can I customize the value of a vuetify's v-select statement?

vue.js

material-design

vuetify.js