Vuetify v-select 问题答案

【问题标题】：Vuetify v-select issueVuetify v-select 问题
【发布时间】：2019-07-02 13:31:04
【问题描述】：

我正在尝试将项目分配给我的 v-select 下拉列表，但我不断收到消息 no data available，我有一个对象数组。我正在使用模板槽，但不确定我做错了什么。

我制作了一个codepen进行演示：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'},
     ]
   }
  }
 })

提前谢谢你们。

【问题讨论】：

你有一个错字：v-select :ietms
@SirDad 我修复了它，但现在它只是在下拉列表中显示 [object object]。
@BernardPagoaga 我修复了它，但现在它只是在下拉列表中显示 [object object]。
想通了：v-slot:item="{item, index}"

标签： javascript vuejs2 vuetify.js

【解决方案1】：

v-select 需要一个字符串数组作为值，但您正在绑定一个填充有对象的数组，这就是您看到 [object object] 的原因，所以您必须添加 item-text 属性：

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

【讨论】：

v-slot:item="{item, index}" 修复了它

【解决方案2】：

你在写

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

应该是

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

我从未使用过 vuetify，但我在 documentacion 中发现了这个问题，然后我叉了你的笔： https://codepen.io/christiancazu/pen/mZLWpL

【讨论】：

我修复了它，但现在它只是在下拉列表中显示 [object object]。

【解决方案3】：

您缺少项目文本 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>

这应该可以工作

【讨论】：