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

Question

我有四个元素，在悬停时，我想更改悬浮元素的图标，我知道我可以用JS/jQuery来完成它，但是我对Vue还不熟悉，我想在vue中这样做。现在，它用以下代码更改了所有四个元素的图标：

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

但我只想改变悬停的元素！我会怎么做？先进的谢谢。

这是我的小提琴！

​

​

Answer 1

本质上，您的问题是使用全局状态为这里的所有元素设置类。

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

解决这一问题的一种方法是将列转换为组件。这样，他们每个人都会有自己的状态。

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>

然后像这样修改#app：

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