Как я могу настроить значение оператора v-select vuetify? - PullRequest
Новая
       17

Как я могу настроить значение оператора v-select vuetify?

1 голос
/ 01 мая 2020

Я пытаюсь передать массив объектов в v-select: items. Я хотел бы отобразить имя объекта для каждой опции. У меня есть роли, отформатированные примерно так [{ id: '1', name: 'admin' }, { id: '2', name: 'guest' } ]

Вот мой код подтверждения 

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

Приведенный выше код возвращает это представление

enter image description here

Как отобразить имя роли вместо [объект объекта]

Ответы [ 2 ]

2 голосов
/ 01 мая 2020

Используйте реквизиты item-name и item-value 

<v-select
    :items="roles"
    item-text="name"
    item-value="id"
    v-model="value"
    label="Select Role"
 ></v-select>
1 голос
/ 01 мая 2020

Вам необходимо использовать элементы в виде массива в формате ниже 

{
  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'
  }
]

Также, если ваш текст и значение совпадают, тогда вы можете использовать сокращенный формат, как показано ниже 

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

DOCS: https://vuetifyjs.com/en/components/selects/

...