vue 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

      }

  }