コンポーネント機能は最初のコンポーネントでのみ動作します。Vue.js

Question

Vue.jsを学習しており、練習問題としてSPAを開発しています。私は再帰的にいくつかのアイコンをimgとしてコンポーネントを介して追加します。すべての画像が適切に示されている

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にアニメーションを適用しているので、コメンターが、指摘、およびページ上のコンポーネントの複数のコピーを持っているとして、#logo-iconに一致する複数のimgタグがあります。したがって、animateの動作は、実装に応じて1つの要素（最初の要素）または複数の要素に影響を与える可能性があります。

代わりに、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を使用する必要があります。