如何在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