Estoy tratando de adjuntar una directiva v-mouseover a un elemento b-list-group-item bootstrap Vue como se muestra a continuación.
<b-row> <b-col cols="3"> <b-list-group> <b-list-group-item :active="register" @click="switchRegister" button @mouseover="isRegisterHover = true" @mouseleave="isRegisterHover = false" class="border-0 bg-transparent register"> Register </b-list-group-item> </b-list-group> </b-col> <b-col cols="9"> <div id="action-screen-canvas-register v-if="isRegisterHover"> </div> </b-col> </b-row> La variable isRegisterHover está vinculada al valor booleano en los datos que determina si se mostrará o no el div.
export default { name: 'Home', components: { Navi }, data() { return { isRegisterHover: false, // ... } }, // ... } El problema es que el div action-canvas-register permanece oculto cuando paso el mouse sobre el elemento, Vue devtool también muestra que los datos permanecen sin cambios cuando paso el mouse sobre ellos. ¿Cómo hago que el valor de isRegisterHover cambie cuando paso el mouse sobre el elemento?
También podrías hacer esto con CSS puro si quisieras. Podrías hacer algo como:
<template> <div id="target">Hover this</div> <div>...</div> // This will be hidden when #target is hovered </template> <script> ... </script> <style> #target:hover + div { visibility: hidden; // Hides the element like v-show or display: none; // Hides the element like v-if } </style>Tu código debería funcionar. Mira esto :
Recomendaría usar v-show en lugar de v-if. Mira esto .
<script> export default { data() { return { isRegisterHover: false } } } </script> <template> <div @mouseover="isRegisterHover = true" @mouseleave="isRegisterHover = false">Hover this</div> <div v-show="isRegisterHover">This will show/hide (v-show)</div> <div v-if="isRegisterHover">This will show/hide (v-if)</div> </template>