Entonces, muchachos, ¿cómo puedo usar @mouseenter y @mouseleave pero el contenido desplegable no desaparece?
<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>Intenté así y me quedé atascado cuando quiero desplazar el contenido o interactuar con él, no tengo idea de cómo manejarlo, espero que me puedan ayudar. Gracias por adelantado.
Intente mover el evento @mouseleave al 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>