Vuetify v-select 不显示选项答案

【问题标题】：Vuetify v-select not showing optionsVuetify v-select 不显示选项
【发布时间】：2021-03-15 23:00:26
【问题描述】：

我有一个从用户那里获取地址的组件，其中一部分是状态。我遵循了文档，与文档相比，我的代码没有任何不同之处。问题是当我单击按钮显示选项时，什么都看不到。如果我输入名称，它会按预期选择。所有其余的输入都可以正常工作，但它们是 v-text-fields。除了一些验证内容之外，我没有发现任何问题。

<template>
  <v-card>
    <v-container>
      <!-- some other stuff -->
      <v-select
        :items="items"
        label="State"
        @input="_=>state=_"
      ></v-select>
    </v-container>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    items: [
      '',   'AL', 'AK', 'AZ', 'AR',
      'CA', 'CO', 'CT', 'DE', 'DC',
      'FL', 'GA', 'HI', 'ID', 'IL',
      'IN', 'IA', 'KS', 'KY', 'LA',
      'ME', 'MD', 'MA', 'MI', 'MN',
      'MO', 'MS', 'MT', 'NE', 'NV',
      'NH', 'NH', 'NM', 'NY', 'NC',
      'ND', 'OH', 'OK', 'OR', 'PA',
      'RI', 'SC', 'SD', 'TN', 'TX',
      'UT', 'VT', 'VA', 'WA', 'WV',
      'WI', 'WY', 'AS', 'GU', 'MP',
      'PR', 'VI'
    ]
  })
}
</script>

【问题讨论】：

标签： vue.js vuetify.js v-select

【解决方案1】：

模板内容需要用v-app包裹起来：

<template>
  <v-app>
    ...
  </v-app>
</template>

最好在App.vue 中执行此操作以应用于所有应用程序组件。

【讨论】：

不知道为什么这不包括在任何地方。大约有 5 种不同的方式来构建一个 vue 应用程序，而且似乎每种方式都有细微差别。将v-app 标签添加到我的项目中修复了列表缺少显示的问题。谢谢

【解决方案2】：

根据 vuetify 文档：项目是应该具有 text 和 value 属性的对象：Vuetify.js v-select api documentation

所以您的data.items 声明将是：

<script>
export default {
  data: () => ({
    items: [
      { text: '---', value: '' },
      { text: 'AL', value: 'AL' },
      { text: 'AK', value: 'AK' },
      ...
    ]
  })
}
</script>

显然，您可以将任何内容放入 text 属性中，即：完整的州名。

【讨论】：