Ion-slides Options params does not exist when using typescript

Ionic Framework Ionic Vue
1

Hi Everyone. I have the copy and paste from the ionic slider document of Vue Framework to make a slider on Init Before the test.

And I got the errors is say params does not exist ton type…

image
image1031×488 44.6 KB

2

The examples might be incorrect or maybe has changed? It looks like there is a getSwiper method on IonSlides.

Try this:

const swiper = await this.getSwiper()

swiper.params = {}
1 Like
3

Oh yeah, this is also probably just the Vue component instance too. To get access to the ion-slides instance, you would need to use a ref in order to access it within Vue.

UPDATE
Just tried this and it works.

<ion-slides ref="slides">
<!-- STUFF -->
</ion-slides>

setup() {
    const slides = ref()

    onMounted(async () => {
        const swiper = await slides.value.$el.getSwiper()
        console.log(swiper.params)
    })

    return {
        slides,
    }
},

I just used onMounted for a quick and dirty test. You should be able to do the same logic within your beforeInit method.

1 Like
4

Hi @twestrick. I am thank you very much. Slider works well on the browser without any errors. But on the first post

const swiper = await this.getSwiper()

getSwiper() have the errors say doesn’t exist

By the way, I wanna many thanks for your help me out of stuck problems. But I have a question why sometimes slider will not working on mobile app after cross-platform. Please do you have any solution for the vue framework?

5

You’re weIcome! I am not 100% sure what you are asking. Can you post your full code of the Vue component?

I don’t think the following code will work. That was my first idea but pretty sure that doesn’t work. You have to go the ref route that I outlined in my second reply.

const swiper = await this.getSwiper()
6

Hi @twestrick. I was got errors and I make images below for sure. :blush:

image
image1057×411 16.9 KB

Actually, instead of put getSwiper() → this.
In my case with the aim for solved “Property ‘params’ does not exist”

I have a little bit change to my code below:

image
image867×459 46.6 KB 

    const slidesOptions = {
      on: {
        beforeInit: async function () {
          const swiper: any = this

          const overwriteParams = {
            slidesPerView: 1.2,
            spaceBetween: 10,
            freeMode: true,

            // this maybe help swiper not fired or
            // not working after platform app to mobile (android: apk, ios: pad)
            observer: true,
            observeParents: true,
            observeSlideChildren: true,
          };

          swiper.params = await Object.assign(swiper.params, overwriteParams);
          swiper.originalParams = await Object.assign(swiper.originalParams, overwriteParams);
        },
      },
    };

and this is my GitHub: GitHub - whitersun/accordion-list-images

The file will be in src/component/slider/slider001.vue

7

Maybe switch

beforeInit: async function () {

to an arrow function, so this will refer to the vue instance instead of the function() {}

beforeInit: async () => {
8

Hi @dolthead, For me maybe function() {} with () => {} is the same thing. But sometimes it will be the array function. So make sure for this, I tried to switch the solution you mark above, and I got the result.

image
image782×387 14.7 KB

image
image756×433 40.1 KB

It got errors.
I think maybe inside on: {} it already helps us binds getSwiper() by ionic modify it. So that why the function unable to bind it for the second time. I used to try it from outside function and get work, but inside Options slider on: { function () {} } will got errors.

It’s okay. By the way, Thanks so much give me some idea to try.

This is good practice for me. Thanks