Question

以下是我的代码的一些片段。基本上我在代码中有几个部分来显示一些数据，所有这些部分都是可折叠的。首先加载展开的所有部分。点击雪佛龙箭头，div - ＆＃39; ibox-content＆＃39;将崩溃。

如何仅定位最近的ibox才能崩溃？在单击一个箭头的时刻，所有部分都会折叠。

＆＃13;

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;
        });
      }
    }
  }
});
");

＆＃13;

<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="m-b-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="m-b-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>

＆＃13;

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>

Vue.js - 点击折叠最近的div

1 个答案: