在 Vue JS 中根据 ID 悬停时显示 Div

Question

我有一个 div，当我想将鼠标悬停在它上面时，它会显示其他 div。但是，我的第一个 div 是动态的，它有一个 ID。那么我如何才能根据其 ID 悬停到 ID？

它应该是 @mouseenter="hoverService{{services.id}} = true" 但它会导致错误。所以我将下面的代码设为静态。

下面是我的代码：

<template>
    <div
    class="col-md-3"
    v-for="(services, index) in servicesFiltered"
    :key="index"
    @mouseenter="hoverService = true"
    @mouseleave="hoverService = false"
    >
    <div class="service_background" v-if="hoverService">
        <div class="mb-1" v-for="(sub_services, index) in services.menu_items" :key="index">
        <router-link
            :to="{ path: `/${sub_services.data}`}"
        >
            <a
            href="#"
            class="btn btn-outline-primary w-100 services_button"
            >{{sub_services.text }}</a>
        </router-link>
        </div>
    </div>
    </div>
</template>


<script>
export default {
  data() {
    return {
      hoverService: false
    };
  }
};
</script>

Answer 1

试试这个代码

https://codesandbox.io/s/y7p9qyyovz

您需要为每个不能使用单个变量操作多个项目的项目保持悬停状态。

在 Vue JS 中根据 ID 悬停时显示 Div

Show Div When Hover Based on ID in Vue JS

vue.js

vue-router

vue-component

vuejs2