时间戳

首页 > 解决方案 > Vuetify - 鼠标悬停时下拉菜单不突出显示

javascript - Vuetify - 鼠标悬停时下拉菜单不突出显示

问题描述

我在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' },
  ],

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

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

Vuetify 使用了许多可以v-menu与fyi 一起使用的示例v-list- 因此您不一定需要使用v-select

推荐阅读