Styjun

I am using the Swiper framework to get slider functionality in Vue. Everything is working fine except that it shows me wrong item if I am filtering my data and after first cycle is over after scroll. The filter returns the correct items but the rendered first item is wrong.

What I discovered was that, it is only so if I slide "down". If I slide "up". Then everything works fine.

I think the problem is with updating. I would like to update it before I return the filtered data in the getter but I do not know how can I reference to my swiper instance? But then the idea of vuex disappears because vuex shouldn't know anything about frontend basically.

This is my vuex getter which filters my data(returns correct data always):

 filterByCategory(state, getters, rootState) 
 if (rootState.shared.selectedCategory !== 'All') 
 return state.items.filter(
 item => crypto.decrypt(item.category) === rootState.shared.selectedCategory,
 );
 
 return state.items.filter(item => item.title.toLowerCase().indexOf(getters.filters.searchString.toLowerCase()) >= 0);
 ,

I am using the mapGetter to get my data in computed like so: ...mapGetters('data', ['filterByCategory']),

This is the component which renders slides(first product-slide is rendered wrongly):

 <swiper
 ref="productSlider"
 :options="swiperOptions"
 class="product-slider"
 @slideChange="onSlideChange"
 >
 <product-slide
 v-for="item in items"
 :key="item.id"
 :item="item"
 /> 
 <div
 slot="pagination"
 class="product-slider__pagination"
 />
 </swiper>

And those are my data() and methods to update the swiper:

props: 
 items: 
 type: Array,
 default: () => [],
 required: true,
 ,
 ,
 data() 
 const self = this;
 return 
 swiperOptions: 
 direction: 'vertical',
 loopedSlides: 1,
 spaceBetween: 30,
 slidesPerView: 1,
 effect: 'fade',
 loop: true,
 mousewheel: 
 invert: false,
 ,
 // autoHeight: true,
 pagination: 
 el: '.product-slider__pagination',
 clickable: true,
 dynamicBullets: true,
 dynamicMainBullets: 1,
 ,
 ,
 ;
 ,
 computed: 
 swiper() 
 return this.$refs.productSlider.swiper;
 ,
 ,
 updated() 
 if(this.swiper) 
 this.swiper.update();
 console.log('swiper-updated');
 
 ,
 beforeDestroy() 
 if(this.swiper) 
 console.log('swiper-before-destroy');
 this.swiper.destroy();
 
 ,
 watch: 
 items(newValue, oldValue) 
 if (this.swiper) 
 console.log(this.items);
 this.$nextTick(() => 
 this.swiper.update();
 );
 
 ,
 ,
 methods: 
 onSlideChange() 
 console.log('Slide did change');
 ,
 

I just can't find what I am doing wrong. I tried also using the observer: true to give the updating over to the framework to handle. Even then it is not working. I've tried everything I could find from Google but nothing is working. I want to know if it is me or bug in the framework. Any help is much appreciated.

I created simple CodePen example.

I finally found the answer to my question from this Github issue!

What I did was following:

I created show variable inside data() and method reRender() with the following in it:

 reRender()
 this.show = false
 this.$nextTick(() => 
 //re-render start
 this.show = true
 this.swiper.destroy();
 this.$nextTick(() => 
 //re-render end
 this.swiper.update();
 )
 )
 

And I added the :v-if="show" to the <swiper></swiper> component.

And in watcher I am calling the reRender() function.

I am not sure how correct it is, however it is working now.