组件功能仅适用于第一个组件Vue.js

Question

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 . Eg 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?

Answer 1

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.