CODEWITHSUNDEEP
javascripthtmlvue.jsvue-componentv-for
Razinar
Razinar

Reputation: 767

Component function works only on the first component Vue.js

I'm learning Vue.js and as exercise i'm developing a SPA. I recursively add some icon as imgs via components. (a lot of code has been omitted to focus on the problem)

Vue.js

Vue.component('icon', {
  template: 
    '<img id="logo-icon" v-on:mouseover="animation" 
     class="platform_button" width="50" height="50" 
     src="../assets/img/logos/Android_icon.png" alt="img" />',

  methods: {
    animation: function(){
      animate("#logo-icon","animated bounce")
    }
  }
})

new Vue({
  el: '#apps'
})

...

.html

<div id="apps">
  ...
  <div v-for="(el, in) in x" style="width:50%">
    <icon></icon>
  </div> 
  ...
</div>

All images are shown properly. I want to start an animation on mouse hover the image. The function to animate works fine, problem is that regardless of which image I hover with the mouse, only the first one will bounce. E.g. if I'm on img1 with the mouse, img1 will bounce. If I'm on img5 with the mouse, img1 will bounce instead of img5. How can I make animate only the image covered by mouse?

Upvotes: 3

Views: 498

Answers (1)

Bert
Bert

Reputation: 82459

As the commenters pointed out, since you are applying the animation to #logo-icon, and you have multiple copies of your component on the page, there are multiple img tags that match #logo-icon. As such the behavior of animate may affect just a single element (the first) or more than one, depending on implementation.

Instead, with Vue, you can just refer to the root element via this.$el. This is a reference to the single specific img element you want to animate.

Vue.component('icon', {
  template: 
    '<img id="logo-icon" v-on:mouseover="animation" 
     class="platform_button" width="50" height="50" 
     src="../assets/img/logos/Android_icon.png" alt="img" />',

  methods: {
    animation: function(){
      animate(this.$el,"animated bounce")
    }
  }
})

What this does is apply the animation to the root element of your component. In this case, the root element is your img. If you had more than one element in your component you would likely need to use a ref.

Upvotes: 2

Related Questions