Mouseover or hover vue.js
I would like to show a div when hovering over an element in vue.js. But I can't seem to get it working.
It looks like there is no event for hover
or mouseover
in vue.js. Is this really true?
Would it be possible to combine jquery hover and vue methods?
i feel above logics for hover is incorrect. it just inverse when mouse hovers. i have used below code. it seems to work perfectly alright.
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>
on vue instance
data : {
upHere : false
}
Hope that helps
Here is a working example of what I think you are asking for.
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;
}
}
});