I am trying to hide and show the name of the user when hovered over the user image , all the users are rendered within a for loop and i created an hide/show method to show the name to the side of the image . but the error is all of the names are doing hide/show if i am hovering over any image in the for loop . please help . this is my code below .
<ul class="space-y-2">
<li v-for="(item,index) in activeUserRooms" :key="index" class="flex space-x-3">
<div class="shadow-md rounded-md h-10" v-if="showName">
<p class="my-2 mx-1">{{item.name}}</p>
</div>
<img :src="item.image" class="rounded-full h-12" @mouseover="showUsername(index)" @mouseleave="hideUsername(index)">
</li>
</ul>
data() {
return {
floatbtnclicked: false,
activeUserRooms:[
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",},
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",},
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",},
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",},
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",},
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",},
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",},
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",},
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",},
{name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}
],
showName:false
};
},
methods:{
showUsername(index){
this.showName = true;
},
hideUsername(index){
this.showName = false;
}
}
thanks in advance .
Try to set index in showName instead boolean value, then in template check v-if="showName === index" and move @mouseleave="hideUsername" to ul:
new Vue({
el: '#demo',
data() {
return {
floatbtnclicked: false,
activeUserRooms:[
{name:"Lisa Wanka",image:"https://picsum.photos/50",},
{name:"Lisa Wanka",image:"https://picsum.photos/50",},
{name:"Lisa Wanka",image:"https://picsum.photos/50",},
{name:"Lisa Wanka",image:"https://picsum.photos/50",},
{name:"Lisa Wanka",image:"https://picsum.photos/50",},
{name:"Lisa Wanka",image:"https://picsum.photos/50",},
{name:"Lisa Wanka",image:"https://picsum.photos/50",},
{name:"Lisa Wanka",image:"https://picsum.photos/50",},
],
showName: null
};
},
methods:{
showUsername(index){
this.showName = index;
},
hideUsername(){
this.showName = null;
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul class="space-y-2" @mouseleave="hideUsername">
<li v-for="(item,index) in activeUserRooms" :key="index" class="flex space-x-3">
<div class="shadow-md rounded-md h-10" v-show="showName === index">
<p class="my-2 mx-1">{{item.name}}</p>
</div>
<img :src="item.image" class="rounded-full h-12" @mouseover="showUsername(index)" >
</li>
</ul>
</div>