VueJS mouseover in for loop

问题

I have a for that will create a component for each index.

In this component, I have a child div containing edit, add, minus buttons. I would like it to be displayed on the component mouseover.

How do I achieve this dynamically without having to play with indexes ?

Thank you kindly.

回答1:

Post component

<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>

List of post

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

This pattern works for me and I think it works for you as well

来源：https://stackoverflow.com/questions/52808658/vuejs-mouseover-in-for-loop