Javascript 在Vue.js中的v-for循环中更改mouseenter/mouseleave事件中元素的类

我试图在mouseenter/mouseleave事件上更改v-for循环中单个元素的类，但我不知道如何使其仅更改悬停元素上的类

我已经尝试将该类绑定到一个变量，但这显然会导致列表中的所有元素都发生更改

<template>
  <ul>
    <li class="item" v-for="item in items" @mouseenter="showInfoBar()" @mouseleave="hideInfoBar()">
        <span class="infobar" :class="{ show : infoBar }"> </span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ItemsList',
  props: ['items'],
  data()  {
    return {
      infoBar: false
    }
  },
  methods: {
    showInfoBar() {
      this.infoBar = true
    },
    hideInfoBar() {
      this.infoBar = false
    }
  }
}
</script>

导出默认值{
名称：'ItemsList'，
道具：['items']，
数据（）{
返回{
信息栏：错误
}
},
方法：{
showInfoBar（）{
this.infoBar=true
},
hideInfoBar（）{
this.infoBar=false
}
}
}

问题在于，您的

信息栏

代表了所有信息栏的状态，而这些信息栏应该独立控制

将

infoBar

转换为一个数组，每个元素代表信息栏在相应索引处的状态，应该可以解决您的问题

<template>
  <ul>
    <li class="item" v-for="(item, index) in items" @mouseenter="showInfoBar(index)" @mouseleave="hideInfoBar(index)">
        <span class="infobar" :class="{ show : infoBar[index] }"> </span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ItemsList',
  props: ['items'],
  data()  {
    return {
      infoBar: []
    }
  },
  mounted: function() {
    for(var i = 0; i < this.items.length; i++) {
      this.infoBar.push(false);
    }
  },
  methods: {
    showInfoBar(index) {
      this.infoBar[index] = true;
    },
    hideInfoBar(index) {
      this.infoBar[index] = false;
    }
  }
}
</script>

导出默认值{
名称：'ItemsList'，
道具：['items']，
数据（）{
返回{
信息栏：[]
}
},
挂载：函数（）{
对于（var i=0；i

我认为更好的方法不是将其作为数组处理，而是将其作为单独的组件处理，我的意思是，更好的做法是将每个组件的状态留给每个组件，而不是处理数组中“组件”集合的状态，我基于对这个想法的反应，您可以将

ItemsList

和

Item

声明为不同的组件，然后为每个项目分别声明一个状态，请告诉我您是否了解此方法，祝您好运

阅读代码后编辑 我还认为，重构代码后，不要用两种不同的方法处理状态更改，只需声明一个

toggleMethod（）

，并对当前状态的当前值进行逻辑拒绝即可

这样更好：

function toggleState() {
    this.someState = !this.someState;
}

比这个

function showState() {
    this.someState = true;
}
function hideState() {
    this.someState = false;
}

---

祝你好运，伙计。

你可以用这个来代替

Ya，这些答案似乎是唯一的两个选项，当然还有一个附加组件更具声明性和优雅性。不仅如此，您还可以单独处理给定集合中每个项的状态，这比在数组中处理要好。因为它默认为null，似乎只使用这个就可以了：`@mouseover=“infoBar=index”`