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

【问题标题】：Vuetify - Drop down menu doesn't highlight on mouse overVuetify - 鼠标悬停时下拉菜单不突出显示
【发布时间】：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' },
  ],

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案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 的解决方案很有效！
抱歉，我对这个问题的理解不同，因为你说的是鼠标悬停而不是点击问题
没问题，感谢您抽出宝贵时间提供帮助 :-)