Ionic-framework: bug: ion-slides options prop does not work with Vue.js

[Livijn]

I am trying to use ion-slides but am experiencing some issues. The options initialSlide and loop are not being used as they should per the documentation.

<template>
<ion-slides ref="slider" :pager="true" :options="slideOpts">
  <ion-slide v-for="item in media" :key="item.id">
    <div class="swiper-zoom-container">
      <img :src="item.fullscreen">
    </div>
  </ion-slide>
</ion-slides>
</template>

// ...
data() {
  return {
    slideOpts: {
      slidesPerView: 1,
      initialSlide: 2,
      speed: 400,
      zoom: {
        maxRatio: 5,
      },
      loop: true,
    },
  }
},

[hntrl]

Having a similar issue in react

[pkl6612]

+1

[pkl6612]

I found that any settings for :options are invalid.

[Livijn]

So, I found what's going wrong. I dumped the instance of Swiper's params to debug $vm0.$refs.slider.swiper.params.

<ion-slides ref="slider" :options="{ slidesPerView: 2 }">

{0: "[", 1: "o", 2: "b", 3: "j", 4: "e", 5: "c", 6: "t", 7: " ", 8: "O", 9: "b", 10: "j", 11: "e", 12: "c", 13: "t", 14: "]", init: true, direction: "horizontal", touchEventsTarget: "container", initialSlide: 0, speed: 300, …}

<ion-slides ref="slider" options="{ slidesPerView: 2 }">

{0: "{", 1: " ", 2: "s", 3: "l", 4: "i", 5: "d", 6: "e", 7: "s", 8: "P", 9: "e", 10: "r", 11: "V", 12: "i", 13: "e", 14: "w", 15: ":", 16: " ", 17: "2", 18: " ", 19: "}", init: true, direction: "horizontal", touchEventsTarget: "container", initialSlide: 0, speed: 300, …}

If I cant pass the options as a String nor an Object then what do I do @mhartington ?

Currently, this is the only way to make it work:

$vm0.$refs.slider.swiper.params.slidesPerView = 2
$vm0.$refs.slider.swiper.update()

[RoelZ]

@Livijn , thank you so much for this temporary fix!

Although it helped me alot finding out how to access the Swiper API, I still can't trigger the autoplay param.
Moreover, it seems that I'm unable to access the swiper instance in the $refs attribute inside my .Vue component. Yet I can debug it in the browser

I tried mounted() and updated() while even using the $nextTick().
A simple this.$refs.mySlides.swiper is undefined, yet this.$refs.mySlides returns the DOM element.

In all cases the slides/swiper ion component works (interactive)

Update
Apparently I was on the verge of getting this fixed, since I'm able to call every method on the <ion-slides> now!

Just to make an addition to @Livijn earlier comment, using the :options won't work, but using updated() (for example) works fine.

updated () {
    this.$nextTick(function () {
      this.$refs.ptmSlides.startAutoplay();
    });
  },

Dumping this.$refs.mySlides.swiper with a console.log for example, will still return undefined though. Which caught me off guard..

[yasin-mesut]

The workaround mentioned by @Livijn is not working for me. I always get an undefined object when trying to access params. Is there any other solution or even a fix for this?

[aaronksaunders]

  mounted() {
    const slides = document.querySelector("ion-slides");
    this.$nextTick(() => {
      slides.options = this.swiperOption;
    });
  }

this seems to be working for me

[giacomotontini]

You should use this.$refs.mySlides.getSwiper() to get the actual instance of swiper
Since it's a promise, once it's solved you can set any params manually in that way: swiperInstance.params.actualParam = value
In my case, calling updated() after params has been set, is not necessary.

Complete example:

this.$refs.swiper_instance.getSwiper().then(swiperInstance => {
                swiperInstance.params.slidesPerView = 5
            })

Hope it helps.

[jreviews]

Thanks for posting these workarounds, but they don't seem to work when using data pulled from an API. If you use v-for on ion-slide and add a delay to populate the array, the slides show vertically. I also tried running the code above after the array is populated without success.

Does anyone have an example of using the slides with a v-for when the data is not immediately available to the component?

You can see the issue here https://codesandbox.io/s/ionic-vue-slides-wk48x where changing the timeout delay to zero allows the slides to work.

[jreviews]

I managed to get this working by wrapping the slides in a container with a v-if check to ensure it only processes when the data is there. That did the trick. Updated example here https://codesandbox.io/s/ionic-vue-slides-mgt5y

[pmfeo]

I'm experiencing the same issue. I can access some methods like this.$refs.slidersElement.slideNext() but not to getSwiper(). Options prop is not working as well. Any update on this?

[liamdebeasi]

Thanks for the issue! We recently released an all new Ionic Vue beta that should fix most of the issues reported. Can you try out the latest Ionic Vue beta and let me know if this is still an issue?

Getting Started with the latest Ionic Vue beta

The new Ionic Vue beta is built for Vue 3. Moving forward, we are not going to support Vue 2. For information on how to get started with the latest beta, check out our Ionic Vue Getting Started Guide.

At this time, we do not have a migration path from Ionic Vue built for Vue 2 to Ionic Vue built for Vue 3, but the Ionic Framework differences should be minimal.

Feel free to check out our Ionic Vue Beta Announcement blog post for more details on this release.

Help! The reported issue still happens in the latest Ionic Vue beta.

Please follow up here with the issue reproduced in an Ionic starter application running the latest Ionic Vue beta. Also include any revised steps to reproduce the issue. Issues that do not have a GitHub repo with the issue reproduced in an Ionic starter app will be closed.

My issue is resolved/My issue is no longer relevant.

You can either close the issue yourself, or do nothing. If there is no response within 14 days, this thread will be automatically closed.

I have a new issue.

Please create a new issue. Be sure to reproduce the issue in an Ionic starter application running the latest Ionic Vue beta and include a link to the repo.

Be sure to search for your issue first, as the issue you are running into may have already been reported.

We are excited to get closer to the Ionic Vue release and look forward to welcoming new Vue developers to the Ionic community. Please let me know if there are any questions. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!