VueJS鼠标悬停在for循环中答案

【问题标题】：VueJS mouseover in for loopVueJS鼠标悬停在for循环中
【发布时间】：2018-10-15 01:31:57
【问题描述】：

我有一个 for 将为每个索引创建一个组件。

在这个组件中，我有一个包含编辑、添加、减号按钮的子 div。我希望它显示在组件鼠标悬停上。

如何在不使用索引的情况下动态实现这一点？

谢谢。

【问题讨论】：

标签： for-loop vue.js mouseover

【解决方案1】：

Post 组件

<template>
  <div v-on:mouseleave.native="showOperations = false"
       v-on:mouseover.native="showOperations = true">
    <!-- post data -->
    <div v-if="showOperations">
      <!-- operations -->
    </div>
  </div>
</template>

<script>
export default {
  ...
  data () {
    return {
      showOperations: false
    }
  },
  ...
</script>

帖子列表

<post v-for="post in posts"
      :key="post.id"
      :post="post">
</post>

这种模式适合我，我认为它也适合你

【讨论】：

谢谢！如果我理解正确， showOperations 将只属于实际帖子而不是共享变量！它对我有用，谢谢！我觉得很愚蠢，我太习惯了 Vuex，以至于忘记了基础知识。我使用了 \@mouseover 和 \@mouseout 仅供参考。