Vuetify v-select 不显示选项
Vuetify v-select not showing options
我有一个组件可以从用户那里获取地址,其中一部分是状态。我按照文档进行操作,但与文档相比,我的代码找不到任何不同之处。问题是当我点击按钮显示选项时,什么都看不到。如果我输入名称,它会按预期进行选择。所有其余的输入都没有问题,但它们是 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>
您需要用v-app
包裹模板内容:
<template>
<v-app>
...
</v-app>
</template>
最好在 App.vue
中执行此操作以应用于所有应用程序组件。
根据 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
属性中,即:完整的州名称。
我有一个组件可以从用户那里获取地址,其中一部分是状态。我按照文档进行操作,但与文档相比,我的代码找不到任何不同之处。问题是当我点击按钮显示选项时,什么都看不到。如果我输入名称,它会按预期进行选择。所有其余的输入都没有问题,但它们是 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>
您需要用v-app
包裹模板内容:
<template>
<v-app>
...
</v-app>
</template>
最好在 App.vue
中执行此操作以应用于所有应用程序组件。
根据 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
属性中,即:完整的州名称。