VueJS将鼠标悬停在for循环中 [英] VueJS mouseover in for loop
本文介绍了VueJS将鼠标悬停在for循环中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个for,它将为每个索引创建一个组件.
I have a for that will create a component for each index.
在此组件中,我有一个子div,其中包含编辑,添加,减号按钮. 我希望它显示在组件鼠标悬停上.
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 ?
谢谢.
推荐答案
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>
此模式对我有用,我认为它也对您有用
This pattern works for me and I think it works for you as well
这篇关于VueJS将鼠标悬停在for循环中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文