Feature request: watch `options` prop for changes and pass down to `swiperInstance.params`
slidesPerView is a setting the swiper docs claim to be changeable by using breakpoints: {}
And manuall doing mySwiper.params.slidesPerView = 3 followed by mySwiper.update() makes the slides widths recalculate.
In the following example, calling the Vue method updateManually() makes swiper react and display 3 slides per view, as expected.
But changing awesomeState doesn't make swiper react, although the <Swiper>-component shows the correct options object in devtools. I was disappointed vue-awesome-swiper doesn't watch for changes on the :options-prop and thought I could still update with this.$refs.mySwiper.swiperInstance.update() – But nothing changed :/
It looks like the :options-prop doens't get passed to this.$refs.mySwiper.swiperInstance.params again after initialization.
<Swiper ref="mySwiper" :options="swiperOptions">
<SwiperSlide>Some slide content...</SwiperSlide>
<SwiperSlide>Some more...</SwiperSlide>
<SwiperSlide>Okay, now it's enuff...</SwiperSlide>
</Swiper>data() {
return {
awesomeState: 2,
};
},
computed: {
swiperOptions() {
loop: true,
pagination: {
el: '.my-pagination',
clickable: true,
},
slidesPerView: this.awesomeState;
},
},
methods: {
updateManually() {
this.$refs.mySwiper.swiperInstance.params.slidesPerView = this.awesomeState;
this.$refs.mySwiper.swiperInstance.update();
},
},Originally posted by @katerlouis in https://github.com/surmon-china/vue-awesome-swiper/issues/299#issuecomment-780552683
Source: surmon-china/vue-awesome-swiper