How to handle hide show differently in a for loop ion vuejs?

user_9194957 0
Viewed 118

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 .

vuejs2 vue.js
1 Answers

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>

user_119891890
Related