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
}
}