# Ionic 4 : How to use methods of slides in VUE

**URL:** <https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446>\
**Category:** Ionic Vue\
**Created:** [August 23, 2018, 1:12pm UTC](https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446 "2018-08-23T13:12:28Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![shashwattripath](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/shashwattripath/32/14800_2.png) [@shashwattripath](https://forum.ionicframework.com/u/shashwattripath)\
**Post date:** [August 23, 2018, 1:12pm UTC](https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446/1 "2018-08-23T13:12:28Z")

</div>

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?

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

```

---

<div class="post-metadata">

**Author:** ![Heihachi88](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@Heihachi88](https://forum.ionicframework.com/u/Heihachi88)\
**Post date:** [April 17, 2019, 10:07am UTC](https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446/3 "2019-04-17T10:07:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![treigh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/treigh/32/131637_2.png) [@treigh](https://forum.ionicframework.com/u/treigh)\
**Post date:** [June 18, 2020, 8:30pm UTC](https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446/4 "2020-06-18T20:30:51Z")

</div>

> [@Heihachi88](#):
>
> slideTo

Elaborating with a quick example for anyone else following:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![VictoR06](https://avatars.discourse-cdn.com/v4/letter/v/e274bd/32.png) [@VictoR06](https://forum.ionicframework.com/u/VictoR06)\
**Post date:** [October 1, 2020, 9:00pm UTC](https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446/5 "2020-10-01T21:00:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\
**Post date:** [October 2, 2020, 6:33am UTC](https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446/6 "2020-10-02T06:33:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [October 24, 2020, 2:18am UTC](https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446/7 "2020-10-24T02:18:50Z")

</div>

> [@treigh](#):
>
> ```auto
> <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. **$el.** slideTo(slideIndex);
> }
> },
> };
> </script>
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![dcandamil](https://avatars.discourse-cdn.com/v4/letter/d/8797f3/32.png) [@dcandamil](https://forum.ionicframework.com/u/dcandamil)\
**Post date:** [November 11, 2020, 5:02pm UTC](https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446/8 "2020-11-11T17:02:12Z")

</div>

For Vue 3 aka composition api try:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:52pm UTC](https://forum.ionicframework.com/t/ionic-4-how-to-use-methods-of-slides-in-vue/139446/9 "2021-07-19T20:52:34Z")

</div>

Closed on July 19, 2021, 8:52pm UTC