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

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

0 голосов
/ 10 февраля 2019

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

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

Мой v-select и выходные данные выглядят примерно так (это настолько близко, насколько я могу получить:

        {{ this.model[0] }}

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

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

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

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

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

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

  :items="items"
  item-value="[0]" 
  item-text="[1]"
0 голосов
/ 10 февраля 2019

Лучше вернуть свойство стран из 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 вы можете определить, что является отображаемым текстом и текущим значением

...