如何解决如何在Vuetify.js中使用v-select:找不到404
我使用了Vuetify.js和Typescript。 现在,我已经尝试了解通过Typescript使用Vuetify组件。 Vuetify.js中的所有组件示例均由Javascript编写。 对于像我这样的初学者,真的很困惑使用它。 现在,我的代码中出现了一些问题。
我只是想确认v-select功能并编写代码。但它不起作用,并且发生404 not found错误。我检查了控制台,但没有错误。 有人建议我吗?
<template>
<v-container>
<v-row align="center">
<v-col class="d-flex" cols="12" sm="6">
{{ selectedPlan}}
<v-select
v-model="selectedPlan"
item-text="label"
item-value="value"
:items="plans"
label="travel_plan"
return-object
></v-select>
</v-col>
</v-row>
</v-container>
</template>
<script lang="ts">
import { Vue } from 'nuxt-property-decorator'
export default class extends Vue {
selectedPlan = { label: 'germany',value: 'germany' }
plans = [
{ label: 'germany',value: 'germany' },{ label: 'spain',value: 'spain' },{ label: 'france',value: 'france' }
]
}
</script>
解决方法
将'@ nuxtjs / vuetify'添加到nuxt.config.js中的模块
这是nuxt的可行解决方案: https://codesandbox.io/s/vigilant-volhard-yiyje?file=/pages/index.vue
修改:
并且添加<div data-app> <content /> </div>
解决了由于未找到data-app而导致下拉列表不显示的问题。
在此处查看更多信息:Vuetify issue with v-menu
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。