如何在 vuejs 的 for 循环中以不同方式处理隐藏显示？

Question

我试图在将鼠标悬停在用户图像上时隐藏和显示用户的姓名，所有用户都在一个 for 循环中呈现，我创建了一个 hide/show 方法来在旁边显示姓名的形象。但错误是如果我将鼠标悬停在 for 循环中的任何图像上，所有名称都在做 hide/show。请帮忙。这是我下面的代码。

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

提前致谢。

Answer 1

尝试在 showName 中设置索引而不是布尔值，然后在模板中检查 v-if="showName === index" 并将 @mouseleave="hideUsername" 移动到 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>

如何在 vuejs 的 for 循环中以不同方式处理隐藏显示？

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

vue.js

vuejs2