Ionic 4 : How to use methods of slides in VUE

Ionic Framework Ionic Vue
1

As per Ionic API docs there is a method slideTo().

I have a action sheet and I want to slide to different slide depend on action selected from ActionSheet.

How to call slideTo() method in JS?

For the action sheet, there is the controller which can be used to access its method. How to use methods on ion-slides?

const actionSheetController = document.querySelector("ion-action-sheet-controller");
3

You have to use refs, like <tag ref="myref">, then this.$refs.myref.slideTo()

1 Like
4

Elaborating with a quick example for anyone else following:

<template>
  <ion-slides ref="slides">
    <ion-slide>Slide 1</ion-slide>
    <ion-slide>Slide 2</ion-slide>
  </ion-slides>
</template>
<script>
export default {
  methods: {    
    // go to the specified slide
    goTo(slideIndex) {      
      this.$refs.slides.slideTo(slideIndex);
    }
  },
};
</script>
5

$ refs doesn’t work for me I get the following error “the object is of unknown type”. Do you know why it happens?

6

same as the other post… a little bit of code can go a long way

7

change your code to get the element of the slides , as above

2 Likes
8

For Vue 3 aka composition api try:

<template>
  <ion-slides ref="myslider" :options="slideOpts">
    <ion-slide>
      <CustomComponent />
    </ion-slide>
    <ion-slide>
      <OtherCustomComponent />
    </ion-slide>
  </ion-slides>
</template>

<script>
...
setup () {
  const myslider = ref(null);
  onMounted(() => {
      myslider.value.$el.slideTo(1, 500); // Slide to <OtherCustomComponent />
  });
  return { slideOpts, myslider };
}
...
</script>
1 Like