Jquery to Vue js need traversing child nodes

Question

I need help to convert jQuery code to Vue js

                 <div class="single-why" v-for="(single, index) in data" :key="index">
                    <div class="content">                            
                        <h5 class="mt-3">100% Certified </h5>
                    </div>
                    <div class="hover-content" style="display:none">
                        <h5>100% Certified Jewellery</h5>                               
                    </div>
                </div>

Here I need: when hover on .single-why , need to show .hover-content as in jQuery

      $('.single-why').on('hover', function (){
            $(this).children('.hover-content').show()
        })

Please suggest me using vue. Thanks

does this helps? https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js — Igor Moraru, Mar 27 '21 at 19:32
it works for single element.. for multiple elements not working. my div is in loop.. — Naim886, Mar 27 '21 at 20:06

score 1 · Accepted Answer · answered Mar 27 '21 at 20:41

You use @mouseover and @mouseleave events. In a loop you have to account for element index, so instead of using a boolean to show the hovered element, you use its index.

 <div 
   class="single-why" 
   v-for="(single, index) in data" 
   :key="index" 
   @mouseover="hoverIndex = index"
   @mouseleave="hoverIndex = null"
 >
   <div class="content">                            
     <h5 class="mt-3">100% Certified </h5>
   </div>
   <div class="hover-content" v-show="hoverIndex === index">
     <h5>100% Certified Jewellery</h5>                               
   </div>
 </div>

data(){
  return {
      hoverIndex: null
  }
}

Thank you so much it works perfectly. I am new at vue you helped me a lot. thanks again — Naim886, Mar 29 '21 at 21:02

Jquery to Vue js need traversing child nodes

1 Answers1