Mouseover or hover vue.js

javascript vue.js
Anders Andersen picture Anders Andersen · Jun 18, 2015 · Viewed 223.7k times · Source

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?

Answer

shakee93 picture shakee93 · Oct 24, 2016

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

Related questions

How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More
forEach is not a function error with JavaScript array

I'm trying to make a simple loop: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) But I get the following error: VM384:53 Uncaught TypeError: parent.children.forEach is not a function …

Read More
Can you force Vue.js to reload/re-render?

Just a quick question. Can you force Vue.js to reload/recalculate everything? If so, how?

Read More