Vue中v-for嵌套v-if点击切换全部实例展开的解决方法

嘿，这个问题我太熟了！你现在遇到的情况是因为所有循环项都共享了同一个showNote变量，所以一点击就会全部展开/收起。要实现只切换点击的那个div，得给每个条目单独维护自己的显示状态，这里给你两种实用的解决方案：

这种方法直接给每个user_leav对象新增一个属性来控制自身的显示状态，逻辑直观，适合数据量不大的场景：

1. 初始化数据时添加状态属性
   在你获取到user_leave_filtered数据后，给每个对象追加一个isShowNote属性，初始值设为false：

   // 假设你是在接口请求成功后处理数据
   this.user_leave_filtered = response.data.map(item => ({
     ...item,
     isShowNote: false // 新增属性，控制当前条目的note显示
   }))
   

2. 修改模板绑定的状态变量
   把原来的全局showNote换成每个条目自己的isShowNote，点击事件也改成切换这个属性：

   <div v-for="user_leav in user_leave_filtered" v-bind:key="user_leav.id">
     <div class="container">
       <div v-if="user_leav.note" v-on:click="user_leav.isShowNote = !user_leav.isShowNote">
         <h4>Note</h4>
       </div>
       <div class="note" v-if="user_leav.isShowNote">
         <p>{{ user_leav.note }}</p>
       </div>
     </div>
   </div>
   

如果你不想修改原始的user_leav数据（比如数据来自后端接口，不想污染原始数据），可以用一个单独的对象来记录每个条目的展开状态：

1. 定义状态对象
   在组件的data里新增一个对象，用来存储每个条目的展开状态：

   data() {
     return {
       // 其他数据...
       expandedNotes: {} // 键是user_leav的id，值是布尔值表示是否展开
     }
   }
   

2. 编写切换方法
   添加一个方法来切换指定id条目的状态，Vue2里需要用$set来确保新增的属性是响应式的（Vue3则不需要，直接赋值即可）：

   methods: {
     toggleNote(id) {
       // Vue2写法
       this.$set(this.expandedNotes, id, !this.expandedNotes[id])
       // Vue3写法：this.expandedNotes[id] = !this.expandedNotes[id]
     }
   }
   

3. 更新模板绑定
   点击事件调用toggleNote并传入当前条目的id，显示状态绑定到expandedNotes[user_leav.id]：

   <div v-for="user_leav in user_leave_filtered" v-bind:key="user_leav.id">
     <div class="container">
       <div v-if="user_leav.note" v-on:click="toggleNote(user_leav.id)">
         <h4>Note</h4>
       </div>
       <div class="note" v-if="expandedNotes[user_leav.id]">
         <p>{{ user_leav.note }}</p>
       </div>
     </div>
   </div>
   

两种方法都能完美解决你的问题，你可以根据自己的业务场景选择合适的方案~

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