Vue JS에서 ID를 기준으로 마우스를 이동할 때 Div 표시

Vue JS에서 ID를 기준으로 마우스를 이동할 때 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>

이 코드 사용

https://codesandbox.io/s/y7p9qyyovz

여러 항목에 대해 단일 변수를 사용하여 조작할 수 없는 각 항목에 대해 호버를 유지해야 한다.

참조URL: https://stackoverflow.com/questions/54719757/show-div-when-hover-based-on-id-in-vue-js