vue-awesome-swiper
vue-awesome-swiper copied to clipboard
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
<swiper :key="slidesPerView">
add key maybe work, but not the most good fun i think