When initializing the slider in Vue3 and attempting to simulate an API failure with Network request blocking
in Chrome DevTools, I encountered an issue where the Swiper UI breaks.
Scenario: API failure → Attempt to reload → UI breaks
Expected Result
Actual Result
Below is a code snippet for your reference:
export default {
name: 'FixedQR',
mounted() {
this.getData()
this.swiper = new Swiper(this.$refs.swiper, {
slidesPerView: 'auto',
watchSlidesProgress: true,
centeredSlides: true,
spaceBetween: 40,
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazy: true,
observer: true,
observeParents: true,
on: {
slideChange: () => {
// Prefetch data when scrolling to last 3 objects in array
if (this.swiper.realIndex === this.qrCodes.length - 3) {
this.getMoreQR()
}
},
},
})
},
Has anyone else experienced a similar situation and can provide a solution? Thanks!