Vuetify v-select значение не возвращает ключ

Question

Я пытаюсь v-моделировать ключи из этих данных из моего v-select:

{
data: {
IT: "Italy",
PL: "Poland",
AF: "Afghanistan",
AX: "Aland Islands",
AL: "Albania"
     }
}

Мой v-select и output выглядят примерно так (это как можно ближе:

        {{ this.model[0] }}

        <v-select
        :items="Object.entries(this.items)"
        v-model="model"
        >
      </v-select>

Проблема с этим, значение v-select будет "IT, Италия", когда я просто хочу Италии

Я пытался найти способы, такие как использование вспомогательной функции для поиска значения и возврата ключа, но я продолжаю получать неопределенность и задаюсь вопросом, есть ли более простой способ сделать это. Или, возможно, преобразование данных в новый объект.

Если у кого-то есть идеи, я был бы очень признателен!

Answer 1

Спасибо за Ваш ответ. Мне удалось заставить его работать без каких-либо вспомогательных функций:

  :items="items"
  item-value="[0]" 
  item-text="[1]"

Answer 2

Лучше вернуть свойство стран из data() (сделать его функцией!), Чем перебирать Object.entries

data() {
    return {
      countries: [
        {key: 'IT', name: 'Italy'},
        {key: 'PL', name: 'Poland'} // ...

      ],
      country: null
    }
  }

Тогда в вашем шаблоне вы можете использовать его так:

<v-select :items="countries" v-model="country" item-value="key" item-text="name"></v-select>

С помощью реквизитов item-value и item-text вы можете определить, что является отображаемым текстом и текущим значением.

Answer 3

Если вы используете Vue-select 3.0, использование сокращения поможет вам.

      const options = [{country: 'Canada', code: 'CA'},];

<!-- v2: using index --->
<v-select :options="options" label="country" index="code"  />

<!-- v3: using reduce --->
<v-select :options="options" label="country" :reduce="country 
=>country.code" />

Дополнительную информацию о миграции можно найти на их веб-сайте .