vue v-for的時(shí)候，怎么讓點(diǎn)擊事件只在循環(huán)的一行觸發(fā)對(duì)應(yīng)效果，如下圖和代碼

利用index索引來(lái)做
v-for = "(item,index) in data" 點(diǎn)擊把索引存到某個(gè)變量為xx
然后下面v-show這樣寫

v-show = "index==xx?true:false"

把 controlDialog 放到 tableData 里面

methods:{

  controlToggle(i){
      this.tableData[i].controlDialog = !this.controlDialog
  },
  controlHide(i){
      this.tableData[i].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>
                            <!-- 點(diǎn)擊后彈出的框框 -->
                            <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
      }
  }

 methods:{
      controlToggle(item){
          item.controlDialog = !item.controlDialog
      },
      controlHide(item){
          item.controlDialog = false
      }
  },

    <div @click="controlToggle(item)" class="hover-btn">
                            <span></span>
                        </div>
  
  另一個(gè)同理。把tag綁在每一行上，而不應(yīng)該是全局用統(tǒng)一tag
  
  還有方法二，就是全局存放index，然后通過(guò)index判斷是否顯示