vue v-for的时候，怎么让点击事件只在循环的一行触发对应效果

最新推荐文章于 2023-08-03 15:03:04 发布

原创最新推荐文章于 2023-08-03 15:03:04 发布 · 1.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在 Vue 中使用 v-for 循环时，遇到点击事件导致多个元素响应的问题。通过在点击事件中传递索引，并在控制弹出框显示的状态时结合索引，实现了点击某一行的向下箭头时，仅该行的弹出框出现。解决方案包括修改 v-for 的语法，添加索引参数，并在控制显示状态的方法中更新一个与索引相关的变量，确保只有当前选中的行的弹出框显示。

vue v-for的时候，怎么让点击事件只在循环的一行触发对应效果
问题
点击有向下箭头的框框的时候，出现了3个弹出框,我想只出现对应的行的弹出框
在这里插入图片描述

原代码

<tr v-for="item in tableData">

                        <td>

                             <label class="checkbox">

                                <input type="checkbox"/>

                                <span></span>

                            </label>

                            <!-- 有向下箭头的框框 -->

                            <div @click="controlToggle" class="hover-btn">

                                <span></span>

                            </div>

                            <!-- 点击后弹出的框框 -->

                            <ul v-show="controlDialog" class="hover-dialog">

                                <li @click="controlHide" class="dialog-item">禁用</li>

                                <li @click="controlHide" class="dialog-item">编辑</li>

                                <li @click="controlHide" class="dialog-item">删除</li>

                            </ul>

                        </td>

                        <td>{{item.id}}</td>

                        <td class="td-title">{{item.title}}</td>

                        <td>{{item.version}}</td>

                        <td>{{item.grade}}</td>

                        <td>{{item.subject}}</td>

                        <td>{{item.number}}</td>

                        <td>{{item.where}}</td>

                        <td>{{item.name}}</td>

                        <td>{{item.time}}</td>

                    </tr>

controlDialog: false,

  methods:{

      controlToggle(){

          this.controlDialog = !this.controlDialog

      },

      controlHide(){

          this.controlDialog = false

      }

  },

解决

 <tr v-for="(item,i) in tableData">

                        <td>

                             <label class="checkbox">

                                <input type="checkbox"/>

                                <span></span>

                            </label>

                            <!-- 有向下箭头的框框 -->

                            <div @click="controlToggle(i)" class="hover-btn">

                                <span></span>

                            </div>

                            <!-- 点击后弹出的框框 -->

                            <ul v-show="cindex===i&&controlDialog" class="hover-dialog">

                                <li @click="controlHide" class="dialog-item">禁用</li>

                                <li @click="controlHide" class="dialog-item">编辑</li>

                                <li @click="controlHide" class="dialog-item">删除</li>

                            </ul>

                        </td>

                        <td>{{item.id}}</td>

                        <td class="td-title">{{item.title}}</td>

                        <td>{{item.version}}</td>

                        <td>{{item.grade}}</td>

                        <td>{{item.subject}}</td>

                        <td>{{item.number}}</td>

                        <td>{{item.where}}</td>

                        <td>{{item.name}}</td>

                        <td>{{item.time}}</td>

                    </tr>

controlDialog: false,

cindex: -1

 methods:{

      controlToggle(i){

          this.controlDialog = !this.controlDialog

          this.cindex = i

      },

      controlHide(){

          this.cindex = -1

          this.controlDialog = false

      }

  }