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

Question

我正在学习 Vue.js 作为练习，我正在开发 SPA。我通过组件递归地添加一些图标作为 imgs。（省略了很多代码重点说明问题）

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>

所有图片都显示正确。我想在鼠标悬停图像时启动动画。动画功能工作正常，问题是无论我用鼠标悬停在哪个图像上，只有第一个会反弹。例如。如果我用鼠标在 img1 上，img1 会反弹。如果我用鼠标在 img5 上，img1 将弹跳而不是 img5。我怎样才能让鼠标覆盖的图像变成动画？

Answer 1

正如评论者指出的那样，由于您将动画应用到 #logo-icon，并且您在页面上有多个组件副本，因此有多个 img 标签匹配 #logo-icon.因此 animate 的行为可能只影响一个元素（第一个）或多个元素，具体取决于实现。

相反，使用 Vue，您可以仅通过 this.$el 引用根元素。这是对要设置动画的单个特定 img 元素的引用。

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

这样做是将动画应用到组件的根元素。在这种情况下，根元素是您的 img。如果您的组件中有多个元素，您可能需要使用 ref.

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

Component function works only on the first component Vue.js

html

javascript

vue.js

vue-component

v-for