IonSlides ref not working when inside IonModal

Ionic Framework Ionic Vue
1

I want to use the “slideTo” method with IonSlides in Ionic Vue.

I tried adding a ref attribute like this:

<ion-modal :is-open="photosModalOpen" @didDismiss="togglePhotosModal(false)">
    <ion-content>
        <ion-slides pager="true" ref="photoSlider">
            <ion-slide v-for="(image, index) in item.resources" :key="index">
                <ion-img :src="$utils.item.image(image)"></ion-img>
            </ion-slide>
        </ion-slides>
        <ion-icon :icon="closeOutline" @click="togglePhotosModal(false)"></ion-icon>
    </ion-content>
</ion-modal>

But it’s null, I assume because the modal is hidden by default.

Any ideas how to make it work so I can use slideTo()?

EDIT:

If I do it a bit after I open the modal, it works, but looks really bad…

let that = this;
setTimeout(function() {
    that.$refs.photoSlider.$el.slideTo(index);
}, 100);
2

this worked for me, let me know if you have any questions.

  • listened for event for when the modal is loaded and I update the slides
  • defined my ref this way const swiperRef = ref<any>(null); 
<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-button @click="setOpen(true)">SHOW MODAL</ion-button>
      {{ showModal }}
      <ion-modal
        :is-open="showModal"
        @didDismiss="setOpen(false)"
        @did-present="modalLoaded"
      >
        <ion-page>
          <ion-content>
            <ion-button @click="goto">GO TO</ion-button>
            <ion-slides ref="swiperRef" :options="options">
              <ion-slide>
                <ion-card>
                  <ion-card-content>Slide 1</ion-card-content>
                </ion-card>
              </ion-slide>
              <ion-slide>
                <ion-card>
                  <ion-card-content>Slide 2</ion-card-content>
                </ion-card>
              </ion-slide>
              <ion-slide>
                <ion-card>
                  <ion-card-content>Slide 3</ion-card-content>
                </ion-card>
              </ion-slide>
            </ion-slides>
          </ion-content>
        </ion-page>
      </ion-modal>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonSlide,
  IonSlides,
  IonButton,
  IonModal
} from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonSlide,
    IonSlides,
    IonButton,
    IonModal
  },
  setup() {
    const swiperRef = ref<any>(null);
    const showModal = ref<any>(false);
    const options = ref<any>({
    });

    return {
      showModal,
      options,
      swiperRef,
      modalLoaded: () => {
        // update the slides here...
        swiperRef.value.$el.swiper.update();
      },
      setOpen: (value: boolean) => (showModal.value = value),
      goto: () => {
        swiperRef.value.$el.swiper.slideTo(1);
      }
    };
  }
});
</script>
3

I’d want to go to another slide before I show the modal with the IonSlides component.

4

I have no idea what you are talking about, sorry

5

Do you have a sample app we can try?

6

Sure, I’ve made a repo for you to try - https://github.com/dftd/IonicVue-SliderStuff

Let me try to explain once more what I need.
I have a main photo slider component.
When a slide is clicked, a modal should be opened.
The modal contains another slider with the same photos.
The slider inside modal should move to the same photo that was on the main slider which you clicked on.

7

is this repo public??

8

The solution was so simple, I just didn’t see it until now…

I used slideOpts for the slider inside modal to set it’s initialSlide instead of using slideTo.

togglePhotosModal(state, index = 1) {
    this.photosModalSlideOpts.initialSlide = index;
    this.photosModalOpen = state;
},