Adding more slidesPerView causes wrong index number vue ionic slides

I’m trying to create a category and subcategory sliders with Ionic Vue. To show appropriate subcategory when category is selected, I’m using getActiveIndex(). When I have one slider per view I’m able to get the slider index correctly. But when I add more sliders per view, I get the same slider index.

Any help appreciated!

Here is my category and subcategory

<ion-content>
      <div style="padding: 0px; margin: 0px">
        <ion-label style="padding: 5%;">Category</ion-label>

        <ion-slides
          style="padding: 0px; margin: 0px; padding-bottom: 10%"
          pager="true"
          :options="slideOpts"
          v-model="subcatName"
          @ionSlideDidChange="getSlideIndex($event)"
        >
          <ion-slide
            style="padding: 0px; margin: 0px"
            v-for="(category, k) in categories"
            :key="k"
          >
            <div class="item">
              <ion-card class="card-size">
                <ion-card-content class="card-content">
                  <img
                    :src="'/assets/images/' + category.icon"
                    style="height: 70%; width: 70%; padding: 5%; margin: auto"
                /></ion-card-content>
              </ion-card>
              <span class="caption"> {{ category.name }}</span>
            </div>
          </ion-slide>
        </ion-slides>
      </div>

      <br />
      <div v-if="currentSubcat != ''" style="padding: 0px; margin: 0px">
        <ion-label style="padding: 5%;">Sub Category</ion-label>
        <ion-slides
          style="padding: 0px; margin: 0px; padding-bottom: 10%"
          pager="true"
          :options="slideOpts"
        >
          <ion-slide
            style="padding: 0px; margin: 0px"
            v-for="(currentSubcat, k) in currentSubcat"
            :key="k"
          >
            <div class="item">
              <ion-card class="card-size">
                <ion-card-content class="card-content"> </ion-card-content>
              </ion-card>
              <span class="caption"> {{ currentSubcat }}</span>
            </div>
          </ion-slide>
        </ion-slides>
      </div>
    </ion-content>

And this is getSlideIndex

getSlideIndex(event) {
      event.target.getActiveIndex().then((index) => {
        this.currentIndex = index;
        this.currentIndex == "0"
          ? (this.currentSubcat = this.A)
          : console.log("error");

        this.currentIndex == "1"
          ? (this.currentSubcat = this.B)
          : console.log("errorB");
        this.currentIndex == "2"
          ? (this.currentSubcat = this.C)
          : console.log("errorC");
        this.currentIndex == "3"
          ? (this.currentSubcat = this.D)
          : console.log("errorD");
        console.log(this.currentSubcat);
      });
    },

slide options here

const slideOpts = {
      initialSlide: 0,
      speed: 400,
      slidesPerView: 1,
      spaceBetween: 3,
      centeredSlides: false,
    };

1 post - 1 participant

Read full topic