vue-awesome-swiper icon indicating copy to clipboard operation
vue-awesome-swiper copied to clipboard

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

Open katerlouis opened this issue 4 years ago • 1 comments

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

katerlouis avatar Feb 17 '21 13:02 katerlouis

<swiper :key="slidesPerView"> add key maybe work, but not the most good fun i think

guda-art avatar Apr 20 '23 10:04 guda-art