Feature request: watch `options` prop for changes and pass down to `swiperInstance.params`

Author: katerlouisCreated Feb 17, 2021Updated Apr 20, 2023

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.

xml
<Swiper ref="mySwiper" :options="swiperOptions">
  <SwiperSlide>Some slide content...</SwiperSlide>
  <SwiperSlide>Some more...</SwiperSlide>
  <SwiperSlide>Okay, now it's enuff...</SwiperSlide>
</Swiper>
javascript
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