Question

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

问题，我的问题是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

我在main.js中添加了Vuetify：

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中的内容替换为example：

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

Vuetify v菜单组件不可见

1 个答案: