vue v-for循環里面點擊當前元素顯示再點擊隱藏

 原文：https://segmentfault.com/q/1010000016290363

<li v-for="(list,index) in getTableData(currentPage)" :key="index"> <div class="popup-msg-div"> <div class="msg-div-add">{{list.detail_address}}</div> <div>{{list.serial_number}}</div> <div>{{list.createtime}}</div> <div class="msg-div-add">{{list.warn_desc}}</div> <div class="popup-msg-more" @click="msgShow(index)">查看詳情</div> </div> <div class="msg-box" v-show="activeIndex===index"> <div class="msg-box-tit popup-msg-tit "> 異常詳情 <div class="popup-box-close" @click="msgClose(index)">收起<b>︽</b></div> </div> <div class="msg-div"> <div>異常原因</div> <div>推送時間</div> <div>推送人員</div> </div> <div class="msg-div" v-for="item in list.detailList"> <div>{{item.warn_desc}}</div> <div>{{item.createtime}}</div> <div>{{item.ctrl_name}}:{{item.ctrl_phone}}</div> </div> </div> </li>

 data() { return { activeIndex: -1 }; },

//查看詳情 msgShow (index) { this.activeIndex = index; }, //收起 msgClose(index) { this.activeIndex = !index; },

我現在是兩個點擊事件控制 我想用msgShow這一個事件控制應該怎么做

 

 

試下傳不同的參數？

<div class="popup-msg-more" @click="msgShow(index)">查看詳情</div>

msgShow (index) {
      this.activeIndex = this.activeIndex == index ? -1 : index; },

•  

msgShow(index){ this.activeIndex = this.activeIndex === index ? !index : index; }

•  

另外一個思路：

先遍歷，給getTableData這個數組每一項添加一個isShowDetail: false
<div class="popup-msg-more" @click="msgShow(list,index)">查看詳情</div>

<div class="msg-box" v-show="list.isShowDetail"> methods:{ msgShow (list,index) { list.isShowDetail = !list.isShowDetail; }, }

可以保證每一條數據的詳情顯示與關閉狀態都是獨立的，
這樣按鈕那里也可以通過list.isShowDetail的狀態來顯示不同的文字