如何在 Vuetify.js 中使用 v-select：发生 404 Not Found答案

【问题标题】：How to use v-select in Vuetify.js : 404 Not Found occurred如何在 Vuetify.js 中使用 v-select：发生 404 Not Found
【发布时间】：2020-12-01 21:56:12
【问题描述】：

我使用过 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>

【问题讨论】：

标签： typescript vue.js vuetify.js nuxt.js

【解决方案1】：

将“@nuxtjs/vuetify”添加到 nuxt.config.js 中的模块

这是一个使用 nuxt 的有效解决方案： https://codesandbox.io/s/vigilant-volhard-yiyje?file=/pages/index.vue

编辑：添加<div data-app> <content /> </div> 解决了由于未找到数据应用程序而导致下拉菜单不显示的问题。在此处查看更多信息：Vuetify issue with v-menu

【讨论】：