CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Naim886
Naim886

Reputation: 17

Jquery to Vue js need traversing child nodes

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

Upvotes: 0

Views: 138

Answers (1)

Igor Moraru
Igor Moraru

Reputation: 7739

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
  }
}

Upvotes: 1

Related Questions