Ion-slides not using options

Ionic Framework
1

Using in Vue the options get totally ignored.

    options: any = {
      loop: true,
    };
  <ion-slides :options="options" >

Is there anything I’m missing? Or is this a known bug? Do we have a workaround? Would appreciate any help!

2

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

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

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

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

Original Post

3

I’ve seen and tried this already. It’s still not working. I always get undefined.

4 
<template>
  <ion-slides pager="true" ref="slider" style="padding-bottom: 30px" :options="swiperOption">
    <ion-slide> <p>Page1</p> </ion-slide>
    <ion-slide> <p>Page2</p> </ion-slide>
    <ion-slide> <p>Page3</p> </ion-slide>
  </ion-slides>
</template>

<script>
export default {
  name: "SlideComponent",
  components: {},
  data() {
    return {
      swiperOption: {
        initialSlide: 3,
        slidesPerView: 2,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  mounted() {
    const slides = document.querySelector("ion-slides");
    this.$nextTick(() => {
      slides.options = this.swiperOption;
    });
  }
};
</script>
1 Like