Ionic 4 vue - Get slide index

Question

In ionic/vue I cant figure out how to get slide index. getActiveIndex is not even firing, it is on the documentation but its not clear how to use it. ionSlideDidChange fires but I cant see anything related to index of an active slide. What is the best way to know which slider is active?

  <ion-slides pager="true" @ionSlideDidChange="ionSlideDidChange" @getActiveIndex="getActiveIndex($event)" :options="slideOptions">
    <ion-slide v-for="item in paymentAccounts" :key="item.code">
      <div class="account-info">
        <div class="account-name">
          {{ item.label }}
          <br />
          R {{ item.balance }}
        </div>
        <div class="account-footer">
          <ion-grid>
            <ion-row>
              <ion-col class="moneyInOut-label">Money-In</ion-col>
              <ion-col class="moneyInOut-label">Money-Out</ion-col>
            </ion-row>
            <ion-row>
              <ion-col class="moneyInOut-amount">{{ item.moneyIn }}</ion-col>
              <ion-col class="moneyInOut-amount">{{ item.moneyOut }}</ion-col>
            </ion-row>
          </ion-grid>
        </div>
      </div>
    </ion-slide>
  </ion-slides>

JS:

methods: {
  getActiveIndex(r) {
    console.log("r", r)
  },
  ionSlideDidChange(e) {
    console.log("e",e)
  },
}

score 1 · Accepted Answer · answered Nov 04 '19 at 09:32

1

I think you can do something like this (at least, it works for me):

ionSlideDidChange(e) {
  e.target.getActiveIndex().then(i => {
    this.activeIndex = i;
  });
}

Hope it helps,

answered Nov 04 '19 at 09:32

Pedraz

148
1
9

Ionic 4 vue - Get slide index

1 Answers1