VueJS将鼠标悬停在for循环中

时间:2018-10-15 01:31:57

标签: for-loop vue.js mouseover

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

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

我如何动态地做到这一点而不必使用索引?

谢谢。

1 个答案:

答案 0 :(得分:2)

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>

此模式对我有用,我认为它也对您有用