Me gustaría mostrar un div al pasar el mouse sobre un elemento en vue.js. Pero parece que no puedo hacerlo funcionar.
Parece que no hay ningún evento para hover el mouse por encima o por encima del mouse en mouseover ¿Es esto realmente cierto?
¿Sería posible combinar los métodos jquery hover y vue?
Siento que la lógica superior para hover es incorrecta. simplemente se invierte cuando el mouse se desplaza. He usado el siguiente código. parece funcionar perfectamente bien.
<div @mouseover="upHere = true" @mouseleave="upHere = false" > <h2> Something Something </h2> <some-component v-show="upHere"></some-component> </div>en la instancia de vue
data : { upHere : false }Espero que ayude
Aquí hay un ejemplo práctico de lo que creo que estás pidiendo.
http://jsfiddle.net/1cekfnqw/3017/
<div id="demo"> <div v-show="active">Show</div> <div @mouseover="mouseOver">Hover over me!</div> </div> var demo = new Vue({ el: '#demo', data: { active: false }, methods: { mouseOver: function(){ this.active = !this.active; } } });No hay necesidad de un método aquí.
HTML
<div v-if="active"> <h2>Hello World!</h2> </div> <div v-on:mouseover="active = !active"> <h1>Hover me!</h1> </div>JS
new Vue({ el: 'body', data: { active: false } })