Vuetify v菜单组件不可见

Question

因此，我一直在关注如何在Vuetify上创建下拉菜单的第一个示例 。 我基本上是复制粘贴整个代码以确保正确完成，并添加了该示例中引用的必要变量。

我的问题是v菜单和该标签中的所有内容都没有显示。 例如，我拥有的菜单正在使用v-btn，只要它在v-menu标记之外，就可见。 'npm run build'和chrome调试器也不会产生任何错误。 我可以使用其他Vuetify组件，但v菜单的行为与所记录的不一样...

任何帮助将非常感激。

Answer 1

我设法使它起作用。

强烈建议您在创建vue项目时使用vue-cli。

我在命令行中执行了以下操作：

$> yarn global add @vue/cli
$> vue create vuetify
$> yarn add vuetify

我加Vuetify在main.js：

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'

Vue.config.productionTip = false

Vue.use(Vuetify)

new Vue({
  render: h => h(App),
}).$mount('#app')

然后，我用示例替换了components\\HelloWorld.vue的内容：

<template>
  <div class="text-xs-center">
    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-btn
          color="primary"
          dark
          v-on="on"
        >
          Dropdown
        </v-btn>
      </template>
      <v-list>
        <v-list-tile
          v-for="(item, index) in items"
          :key="index"
          @click="test"
        >
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
  export default {
    data: () => ({
      items: [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' }
      ]
    }),
    methods: {
      test() {

      }
    }
  }
</script>

然后运行yarn serve

并且下拉按钮的行为符合预期，减去CSS。