Vue-awesome-swiper: Swiper doesnt update

[ouraios]

Hi,

When i increase the number of slidesPerView the Swiper component doesnt update the number of slides displayed per view even if i call the update method on the component.

How can i do to force the swiper component to render with the updated options ?

[dimonx3]

I also can not understand how to change params after init.
You can try change some params directly in swiper instance. But not all params works.
this.swiper.params.slidesPerView = 3;
See Async data example.
I'm not sure if this is the right way.
You can also try call destroy() and init().

[surmon-china]

swiper.update()

[MichalKrakow]

doesnt work with lazy loading...

[ouraios]

As i said @surmon-china it doesnt work even after calling the update method :/

[donng]

Do anybody know how to update swiper after I change swiper options?

[jgribonvald]

I have nearly a same problem.
When using vue-cli to serve the app I don't get any problem, but when deploying to a builded component the update doesn't work anymore and also any actions (next, prev, etc...) are working I need to make actions manually.
I'm using it in web-components !

[mrGrochowski]

doesnt work with lazy loading...

have the same issue

[Mark910413]

I got the same issue. Have you solved it? @jgribonvald

[jgribonvald]

I got the same issue. Have you solved it? @jgribonvald

I manage all actions manually but I call component functions...

[Mark910413]

I got the same issue. Have you solved it? @jgribonvald

I manage all actions manually but I call component functions...

That is to say, you haven't solved it yet？

[kurumbus]

Hey guys, same question here.

There's of course a hack with hanging v-if="showSlider " on the slider and then watching for changing in swiper options.

            swiperOptionsActive() {
                this.showSlider = false;
                this.$nextTick(() => {
                    this.showSlider = true
                });
            },

But it's a bad way.

[Rhogar]

worked for me:

this.$refs[your swiper component ref ].swiper.destroy()
this.$nextTick(() => {
this.$refs[your swiper component ref].mountInstance()
this.$refs[your swiper component ref].swiper.update()
})

[timmi-on-rails]

Changing the parameters/options of a swiper after initialization does not seem to be a supported scenario.
Looking at https://swiperjs.com/api/, there are only very few functions like mySwiper.changeDirection(direction) that allow updating certain options after initialization.
Therefore I would not recommend manipulating the mySwiper.params directly.

I found a solution to the problem here: https://michaelnthiessen.com/force-re-render/.
My problem is similar. I have to recreate the swiper when changing the loop option.
This can be achieved like so:

```vue

````

This works, because vue will automatically recreate the component, if the key changes.
I guess if you want to change multiple options you would have to come up with a different key.

There are two things the library authors should consider imo:

1. https://swiperjs.com/api/ should make the mySwiper.params object a copy of the initial options (at the point of initialization), if it is not meant to be changed after initialization. This would avoid people implementing hacks that work with some of those options for now, but may not in the future.
2. vue-awesome-swiper could try to find a way to show that options cannot change after creation of the component, so people won't try binding them and expect it to work. Don't know if that is possible somehow in vue?