如何在Vuetify.js中使用v-select : 404未找到

Question

我用过Vuetify.js和打字本。现在我已经试着理解使用Vuetify组件使用的类型记录。Vuetify.js中的所有组件样本都是用Javascript编写的。对于像我这样的初学者来说，使用它真的很困惑。现在我的代码中有一些问题。

我只想确认v-select函数并编写代码。但是它没有工作，404没有找到错误。我检查了控制台，但没有出错。有人建议我吗？

    <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>

Answer 1

在nuxt.config.js中的模块中添加@nuxtjs/vuetify

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

编辑：添加<div data-app> <content /> </div>解决了由于数据而导致的下拉列表不显示的问题--app未找到。请参阅这里的更多内容：Vuetify issue with v-menu