I have a user card component with a menu button at the top that should display a menu when clicked. The issue I'm facing is that when I click on the menu button of the other user cards, the menu still shows on the first card instead of the one I clicked on. What could be causing this problem?
<template>
<div class="custom-users" v-if="users && users.length > 0">
<user-card
v-for="user in users"
:key="user.userId"
@open-menu="openMenu"
>
</user-card>
<div class="menu" v-if="showMenu">
<p>Delete</p>
</div>
</div>
</template>
<script>
export default{
data() {
return {
showMenu: false,
};
},
methods: {
openMenu(){
this.showMenu = !this.showMenu;
},
}
}
</script>
<style scoped>
.custom-users{
position: relative;
}
.menu{
position: absolute;
height: 100px;
width: 100px;
top: 60px;
right: 25px;
z-index: 9999;
}
</style>