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
  }

},