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

 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判断是否显示