How to hide div element on hover of mouse in Vuejs?

Question

 new Vue({ el: '#mouse', data: { showByIndex: null }, methods: { } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="mouse"> <div class="parent" v-for="i in 1" @mouseover="showByIndex = i" @mouseout="showByIndex = null"> <div class="child-one"> Some dummy text </div> <div class="child-two" v-show="showByIndex === i"> Show me only on hover on "div.parent" element </div> </div> </div>

Working example:- https://codepen.io/dhanunjayt/pen/XWgyqXW

With the above code i am able to show the text, when hover of the div element. But small issue is when hover first element should not reflect.

Answer 1

Like following snipppet?

 new Vue({ el: '#mouse', data: { showByIndex: null }, methods: { } })

 .parent { padding: 2em; background: violet; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="mouse"> <div class="parent" v-for="i in 1" @mouseover="showByIndex = i" @mouseout="showByIndex = null"> <div class="child-one" v-show="showByIndex === null"> Some dummy text </div> <div class="child-two" v-show="showByIndex === i"> Show me only on hover on "div.parent" element </div> </div> </div>