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

【问题标题】：How to handle hide show differently in a for loop ion vuejs?如何在 vuejs 的 for 循环中以不同方式处理隐藏显示？
【发布时间】：2021-10-28 08:27:23
【问题描述】：

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

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

提前致谢。

【问题讨论】：

标签： vue.js vuejs2

【解决方案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>

【讨论】：