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

【问题标题】：Component function works only on the first component Vue.js组件功能仅适用于第一个组件 Vue.js
【发布时间】：2017-11-10 07:29:23
【问题描述】：

我正在学习 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。怎样才能只让鼠标覆盖的图片动起来？

【问题讨论】：

原因是id对于每个元素应该是唯一的；尝试使用类而不是id。
哪个id？应用程序或徽标图标？
您的图标组件有一个id="logo-icon"，它将为每个呈现的图标组件重复。但是ids 应该是唯一的，这就是为什么你的animate 函数在#logo-icon 上调用它时只影响一个元素。
现在所有图像在鼠标移到其中一张时都会弹跳
由于它们是递归添加的，它们都具有相同的类属性。我怎样才能只反弹选定的一个？

标签： javascript html vue.js vue-component v-for

【解决方案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。

【讨论】：

this.$el 是关键。谢谢伯特
@JuveLover 乐于助人:)