Vue.js-單擊可折疊最近的div

Question

以下是我的代碼片段。 基本上，我的代碼中有幾節顯示一些數據，所有這些節都是可折疊的。 首先加載所有部分展開。 在人字形箭頭上單擊時，div -'ibox-content'將折疊。

如何僅將最近的ibox定位為折疊？ 在單擊一個箭頭的瞬間，所有部分都被折疊。

 var vue = new Vue({ el: '#vue-systemActivity', data: { loading: false, collapsed: false, dateStart: '', dateEnd: '', status: 'fail', msg: '', meta: '', data: '' }, created: function() { this.fetchData(); }, ready: function() { this.fetchData(); }, methods: { fetchData: function() { var self = this; if (self.dateStart != '' && self.dateEnd != '') { this.loading = true; $.get(baseUrl + '/backend/getSystemActFeed?dateStart=' + self.dateStart + '&dateEnd=' + self.dateEnd, function(json) { self.data = json.data; self.status = json.status; self.meta = json.meta; self.msg = json.msg; }).always(function() { self.loading = false; }); } } } }); "); 

 <div v-if="data.events"> <div class="ibox float-e-margins" :class="[collapsed ? 'border-bottom' : '']"> <div class="ibox-title"> <h5>Events</h5> <div class="ibox-tools"> <a v-on:click=" collapsed = !collapsed" class="collapse-link"> <i :class="[collapsed ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i> </a> </div> </div> <div v-for="event in data.events" class="ibox-content inspinia-timeline" v-bind:class="{'is-collapsed' : collapsed }"> <div class="timeline-item"> <div class="row"> <div class="col-xs-3 date"> <i class="fa fa-calendar"></i> {{event.fDateStarted}} <br/> </div> <div class="col-xs-7 content no-top-border"> <!-- <p class="mb-xs"><strong>Meeting</strong></p> --> <b>{{event.title}}</b> started on {{event.fDateStarted}} at {{event.at}} </div> </div> </div> </div> </div> </div> <div v-if="data.mentorBookings"> <div class="ibox float-e-margins" :class="[collapsed ? 'border-bottom' : '']"> <div class="ibox-title"> <h5>Mentorship</h5> <div class="ibox-tools"> <a v-on:click=" collapsed = !collapsed" class="collapse-link"> <i :class="[collapsed ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i> </a> </div> </div> <div v-for="mentorProgram in data.mentorBookings" class="ibox-content inspinia-timeline"> <div class="timeline-item"> <p class="mb-xs"><strong>{{mentorProgram.programName}}</strong></p> <div v-for="upcomingBooking in mentorProgram.upcomingBookings"> <div class="row"> <div class="col-xs-3 date"> <i class="fa fa-users"></i> {{upcomingBooking.fBookingTime}} <br/> </div> <div class="col-xs-7 content no-top-border"> #{{upcomingBooking.id}} {{upcomingBooking.mentor.firstname}} {{upcomingBooking.mentor.lastname}} ({{upcomingBooking.mentor.email}}) mentoring {{upcomingBooking.mentee.firstname}} {{upcomingBooking.mentee.lastname}} ({{upcomingBooking.mentee.email}}) on {{upcomingBooking.fBookingTime}} thru {{upcomingBooking.sessionMethod}} <!-- <p><span data-diameter="40" class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,4,7,3,2,9,8,7,4,5,1,2,9,5,4,7,2,7,7,3,5,2</span></p> --> </div> </div> </div> </div> </div> </div> </div> 

Answer 1

每個div應該具有各自的collapsed狀態以進行控制。 您可以將collapsed成數組/對象來控制它們。

簡單示例： https : //codepen.io/jacobgoh101/pen/QQYaZv?editors=1010

<div id="app">
  <div v-for="(data,i) in dataArr">
    {{data}}<button @click="toggleCollapsed(i)">toggle me</button>
    <span v-if="collapsed[i]">this row is collapsed</span>
    <br/>
    <br/>
  </div>
</div>

<script>
var app = new Vue({
  el: "#app",
  data: {
    dataArr: ["data0", "data1", "data2"],
    collapsed: [false, false, false]
  },
  methods: {
    toggleCollapsed: function(i) {
      this.$set(this.collapsed, i, !this.collapsed[i]);
    }
  }
});
</script>