CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2
freakman
freakman

Reputation: 55

Vue.js 2 How can i deal with mouseenter, mouseleave and content dropdown not disappear

So guys, how can I use @mouseenter and @mouseleave but dropdown content, not disappear

<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>

I tried like this and I got stuck when I want to hover the content or interact with it, I have no idea to handle it, hope y'all can help me. Thanks in advance.

Upvotes: 3

Views: 1745

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

Try to move @mouseleave event to 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>

Upvotes: 3

Related Questions