Vue.js 2 마우스 엔트리, 마우스 탈퇴 및 콘텐츠 드롭다운을 처리하는 방법

Vue.js 2 마우스 엔트리, 마우스 탈퇴 및 콘텐츠 드롭다운을 처리하는 방법

그래서 여러분, 어떻게 하면@mouseenter그리고.@mouseleave드롭다운 콘텐츠, 사라지지 않음

<div class="wrapper">
  <div class="link" @mouseenter="show = true" @mouseleave="show = false">Item</div>
  <div class="content" v-if="show">This is a content</div>
</div>

저는 이렇게 시도했지만 콘텐츠를 올리거나 상호작용하고 싶을 때 막혔어요. 어떻게 해야 할지 모르겠어요.여러분들이 도와주셨으면 좋겠어요.잘 부탁드립니다.

움직이려고 하다@mouseleave에 대한 이벤트.content:

new Vue({
  el: "#app",
  data: {
    show: false,
    links: [1,2,3,4,5],
    linkId: null
  },
})

.wrapper{
  display: grid;
  justify-content: start;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="wrapper" @mouseleave="linkId = null">
  <ul>
    <li v-for="link in links" :key="link">
      <div class="link" @mouseenter.prevent="linkId = link" >Item{{ link }}</div>
      <div class="content" v-if="link === linkId" @mouseleave.prevent="linkId = null">This is a content</div>
    </li>
  </ul>
</div>
</div>

언급URL : https://stackoverflow.com/questions/69056070/vue-js-2-how-can-i-deal-with-mouseenter-mouseleave-and-content-dropdown-not-dis