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