javascript - 在悬停时更改 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>

View :

new Vue({
    el: '#app',

    data : {
        isActive : true
    },

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

但我只想更改悬停的元素!我会怎么做？ 提前致谢。

这是我的 fiddle !

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>