Vue.js中v-for循环内如何单独控制各元素的显示隐藏

问题根源 #

所有列表项共用了同一个全局布尔变量showName控制显隐，只要修改这个值，所有绑定了v-if="showName"的元素都会同步触发状态变更，自然就出现全部用户名一起显示隐藏的问题。

解决方案（推荐，无需修改原数组） #

改用「存储当前悬停项的索引」的方式来控制对应项的显隐即可，修改代码如下：

1. 模板部分

<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="activeHoverIndex === index">
            <p class="my-2 mx-1">{{item.name}}</p>
        </div>
        <img :src="item.image" class="rounded-full h-12" @mouseover="showUsername(index)" @mouseleave="hideUsername">
    </li>
</ul>

2. data部分

将原来的全局showName字段替换为存储悬停索引的变量：

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",}
      ],
      activeHoverIndex: -1 // -1代表没有项处于悬停状态
    };
},

3. 方法部分

methods:{
    showUsername(index){
        // 记录当前悬停项的索引
        this.activeHoverIndex = index;
    },
    hideUsername(){
        // 移出时重置索引
        this.activeHoverIndex = -1;
    }
}

内容的提问来源于stack exchange，提问作者Biswas Sampad