如何将悬停功能应用于 Vue / Vuetify Autocomplete 自动完成列表？答案

【问题标题】：How to apply a hover function to a Vue / Vuetify Autocomplete autocomplete list?如何将悬停功能应用于 Vue / Vuetify Autocomplete 自动完成列表？
【发布时间】：2021-09-27 20:22:51
【问题描述】：

我更像是一个 Vue-Noob，发现它理解起来有点复杂。也许你们看到了该代码，并且对我的问题有“最佳实践”或最紧凑的解决方案：

我有一个自动完成下拉框。展开时，我看到一个带有可点击条目的列表。如果鼠标悬停在列表上，我需要获取悬停项目的信息。就像，“doFunnyStuff”方法会将悬停对象的数据推送到一个方法，并用它做一些事情（可能是外部的）

提前感谢您提供任何有用的评论！

<template>
  <v-autocomplete
    v-model="selected"
    dense
    outlined
    hide-details
    return-object
    background-color="white"
    light
    :placeholder="placeholder"
    hide-no-data
    style="width: 500px"
    :loading="loading"
    :search-input.sync="query"
    :items="items"
    clearable
  >
    <template slot="selection" slot-scope="{ item }" return-object>
      <v-list-item @mouseenter="doFunnyStuff(item)">
        <v-list-item-content>
          <v-list-item-title> {{ item.text }}} </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </template></v-autocomplete
  >
</template>
    </template>

【问题讨论】：

您是否正在寻找工具提示组件来显示数据？因为 vuetify 有这样一个组件。如果只是将数据推送到方法中，则可以在方法中声明 makeFunnyStuff(item) 并根据需要使用数据
不，不是工具提示，我使用数据来做一些完全不同的事情（例如，我在地理地图应用程序上突出显示某些内容）但是，该方法存在，它不起作用。我认为 v-list-item 没有 mouseenter 事件...
知道了。 v-list-item 有 click 和 keydown 事件。如果它是 mousehover 您正在寻找的内容，您可以将您的组件包装在一个 div 中并使用它。让我知道这是否适合您 =)

标签： javascript vue.js autocomplete hover vuetify.js

【解决方案1】：

也许我误解了你的问题，但是当你想对展开列表的悬停项目做某事时，你应该使用 item 插槽而不是 selection。

选择槽仅用于组件顶部的所选项目，因此您的代码有效，但仅当您将鼠标悬停在已选择的项目上时。

Mouseenter 事件与 vuetify 中的任何组件无关，它是一个 JS 事件，可以附加到任何组件（如果之前没有被 vuetify 或任何其他库附加，ofc）。

所以你的代码可能是这样的：

<div id="app">
  <v-app id="inspire">
    <v-autocomplete
      v-model="value"
      :items="items"
      dense
      filled
      label="Filled"
    >
      <template #item="{ item, on, attrs }">
        <v-list-item @mouseenter="doFunnyStuff(item)" v-on="on" v-bind="attrs">
          <v-list-item-content>
            <v-list-item-title> {{ item }} </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-autocomplete>
    <div>
      <p>{{ hoveredItem }}</p>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['foo', 'bar', 'fizz', 'buzz'],
    value: null,
    hoveredItem: "not hovered yet"
  }),
  methods: {
    doFunnyStuff (item) {
      this.hoveredItem = item;
    }
  }
})

Codepen link with an example

【讨论】：