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>