悬停在vue框架中更改多个元素图标

Question

I have four elements, On hover I want to change the icon of the hovered element, I know I can do it with JS/jQuery but I'm new to vue and want to do it in Vue. Now It changed the all four elements icon with this code:

HTML:

<div class="col-md-3">
<div class="welcome-latest">
    <div class="hover-icon animated" v-bind:class="{ latestActive : isActive }">
        <i class="fa fa-play" aria-hidden="true"></i>
    </div>
    <div class="welcome-latest-part"
            v-on:mouseover="latestActive"
            v-on:mouseleave="latestInActive">
        <a href="#">
            <div class="latest-icon">
                <i class="fa fa-play-circle-o" aria-hidden="true"></i>
            </div>
            <hr>
            <div class="latest-title">
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
            </div>
        </a>
    </div>
</div>
</div>

Vue:

new Vue({
    el: '#app',

    data : {
        isActive : true
    },

    methods : {
        latestActive (part) {
            this.isActive = false;
        },
        latestInActive(part) {
            this.isActive = true;
        }
    }
});

but I want to change only the hovered element! How I will do that? Thank in advanced.

This is my fiddle !

Answer 1

Essentially your problem is you are using a global state to set the class for all the elements here.

v-bind:class="{ latestActive : isActive }"

One way to solve this would be to turn your columns into components. That way, they would each have their own state.

Vue.component("component",{
  props:["text"],
  template:"#component",
  data(){
    return {
        isActive:true
    }
  }
})

<template id="component">
  <div class="welcome-latest">
    <div class="hover-icon animated" :class="{ latestActive : isActive }">
      <i class="fa fa-play" aria-hidden="true"></i>
    </div>
    <div class="welcome-latest-part"
         v-on:mouseover="isActive=true"
         v-on:mouseleave="isActive=false">
      <a href="#">
        <div class="latest-icon">

        </div>
        <hr>
        <div class="latest-title">
          <h2>{{text}}</h2>
        </div>
      </a>
    </div>
  </div>
</template>

And then modify #app like this:

<div class="col-md-3">
    <component text="Lorem ipsum dolor sit amet, consectetur adipisicing elit"></component>
</div>