Vuetify-鼠标悬停在下拉菜单上不突出显示

Question

我已经在 Vuetify 中创建了一个下拉菜单，但是虽然可以使用，但是当我将鼠标移到每个选项时，它不会突出显示每个选项。屏幕上有一个片段，可以显示我的意思。

鼠标指针从中丢失，但悬停在“我的设置”上。

我的html和脚本代码如下。我想念什么？

 <v-menu
  v-model="actions"
 >
   <template v-slot:activator="{ on }">
     <v-btn
       icon
       v-on="on"
     >
       <v-icon>mdi-arrow-down-drop-circle</v-icon>
     </v-btn>
   </template>

   <v-list>
     <v-list-item
       v-for="(item, i) in items"
       :key="i"
       @click="stuff"
     >
       <v-list-item-title>{{ item.title }}</v-list-item-title>
     </v-list-item>
   </v-list>
 </v-menu>

然后我的脚本包含此数据

items: [
    { title: 'My Preferences' },
    { title: 'My Settings' },
    { title: 'Log out' },
  ],

Answer 1

Boussadjra有一个很好的解决方法，但是真正的问题是@click="stuff"可能不是有效的方法。这就是为什么您的列表没有突出显示的原因。我已经在一个代码笔中测试了您的代码，将点击侦听器更改为@click=""或@click="thisIsAValidMethod()"（我在scripts部分的方法中添加了方法），并且可以立即使用。

Vuetify使用了许多示例，其中您可以将v-menu与v-list配合使用-因此您不一定需要使用v-select

Answer 2

我看到您可以使用v-select组件实现相同的用例，其中将鼠标移到每个项目时，每个项目都将突出显示：

 <v-select
            v-model="selectedItems"
            :items="items"
            menu-props="auto"
            label="Select"
            hide-details

            single-line
          ></v-select>

Answer 3

对于任何偶然发现此问题的人： 在我的情况下，我在悬停 v-menu 选项时没有任何特定的样式。 这是因为我的 @click="method()" 在 v-list-item-title 而不是 v-list-item