Vuetify v-выберите проблему

Question

Я пытаюсь назначить элементы моему выпадающему списку v-select, но получаю сообщение no data available, у меня есть массив объектов. Я использую слот для шаблона, но не уверен, что делаю неправильно.

Я сделал кодовую ручку для демонстрации: https://codepen.io/anon/pen/LKmZKZ?editors=1011

  <div id="app">
  <v-app id="inspire">
   <v-container>
     <v-layout>
      <v-flex xs4>
      <v-select :items="items" label="people">
        <template slot="selection-item" slot-scope="item">
          <v-icon :color="item.icon_color">{{item.icon}}</v-icon>
          {{item.name}}
          </template>
         </v-select>
      </v-flex>
     </v-layout>
   </v-container>
  </v-app>
 </div>


new Vue({
  el: '#app',
  data() {
   return {
  items: [
    {name: 'Karen', icon : 'search', icon_color: 'red'},
    {name: 'Gordon', icon : 'person', icon_color: 'yellow'},
    {name: 'Craig', icon : 'opacity', icon_color: 'blue'},
    {name: 'Chris', icon : 'pets', icon_color: 'orange'},
     ]
   }
  }
 })

Заранее спасибо, ребята.

Answer 1

v-select ожидает массив строк в качестве значения, но вы связываете массив, заполненный объектами, поэтому вы видите [object object], поэтому вам нужно добавить item-text prop:

<v-select
  :items="items"
   name="item"
   label="Select a item"
   item-text="name"
></v-select>

Answer 2

Вам не хватает элемента text item-text = "name", поэтому в раскрывающемся списке говорится [object object]

<div id="app">
  <v-app id="inspire">
   <v-container>
     <v-layout>
      <v-flex xs4>
      <v-select :items="items" item-text="name" label="people">
        <template slot="selection-item" slot-scope="item">
          <v-icon :color="item.icon_color">{{item.icon}}</v-icon>
          {{item.name}}
          </template>
         </v-select>
      </v-flex>
     </v-layout>
   </v-container>
  </v-app>
 </div>

Это должно работать

Answer 3

вы пишете

<v-select :ietms="items" label="people">

должно быть

<v-select :items="items" label="people">

Я никогда не использовал vuetify, но я нашел в Documentmentacion об этом, тогда я раздвоил вашу ручку:https://codepen.io/christiancazu/pen/mZLWpL