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

Posted 2023-02-23

【中文标题】Vuetify - 鼠标悬停时下拉菜单不突出显示

【英文标题】：Vuetify - Drop down menu doesn't highlight on mouse over

【发布时间】：2019-12-26 18:08:20

【问题描述】：

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

【参考方案1】：

只需将link 属性添加到v-list-item。

【参考方案2】：

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

【参考方案3】：

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

Vuetify 使用了许多示例，您可以在其中使用 v-menu 和 v-list 仅供参考 - 所以您不一定需要使用 v-select

【讨论】：

谢谢你，Cathy - 我不确定 Boussadjra 是什么意思，因为下拉菜单与菜单不同。我已经接受了你的回答，因为我将东西更改为 stuff() 并且它有效。非常感谢你:-)

【参考方案4】：

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

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

            single-line
          ></v-select>

【讨论】：

只是让您知道这不起作用，它不再是一个图标。 Cathy 的解决方案很有效！

抱歉，我对这个问题的理解不同，因为你说的是​​鼠标悬停而不是点击问题

没问题，感谢您抽出宝贵时间提供帮助 :-)