在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/Python  HTML/ vue v-for循環(huán)里面點擊當前元素顯示再點擊隱藏

vue v-for循環(huán)里面點擊當前元素顯示再點擊隱藏

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

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

回答
編輯回答
笨笨噠

另外一個思路:

先遍歷,給getTableData這個數(shù)組每一項添加一個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;
    },
}

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

2017年10月24日 23:08
編輯回答
何蘇葉

試下傳不同的參數(shù)?

<div class="popup-msg-more" @click="msgShow(index)">查看詳情</div>
msgShow (index) {
      this.activeIndex = this.activeIndex == index ? -1 : index;
},
2018年8月20日 21:34
編輯回答
殘淚
msgShow(index){
    this.activeIndex = this.activeIndex === index ? !index : index;
}
2018年9月18日 08:55