Vuetify v-menu 组件不可见

Posted 2023-02-23

【中文标题】Vuetify v-menu 组件不可见

【英文标题】：Vuetify v-menu component not visible

【发布时间】：2019-11-28 06:46:07

【问题描述】：

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

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

任何帮助将不胜感激。

【问题讨论】：

请发布您的模板。

【参考方案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。