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

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

      }

  },


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

解决

 <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

      }

  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77