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

Question

问题

我点击有向下箭头的框框的时候，出现了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
      }
  },

Answer 1

你好，我遇到了跟你这个一样的问题，我试了一下评论里面的，好像都不行，你解决了吗？能不能告诉我一下。

Answer 2

methods:{ controlToggle(item){ item.controlDialog = !item.controlDialog }, controlHide(item){ item.controlDialog = false } }, <div @click="controlToggle(item)" class="hover-btn"> <span></span> </div> 另一个同理。把tag绑在每一行上，而不应该是全局用统一tag 还有方法二，就是全局存放index，然后通过index判断是否显示

Answer 3

利用index索引来做v-for = "(item,index) in data" 点击把索引存到某个变量为xx 然后下面v-show这样写 v-show = "index==xx?true:false"

Answer 4

把 controlDialog 放到 tableData 里面 methods:{ controlToggle(i){ this.tableData[i].controlDialog = !this.controlDialog }, controlHide(i){ this.tableData[i].controlDialog = false } },