Lazy loading & :data-src

[mqqza]

I have code like this. Then i'm update images from props. my thumbnail not update. My lazy load show me infinity loading but date already set.

<template>
    <div class="sport-gallery">
        <swiper :options="swiperOption" ref="gallerySwiper">
            <swiper-slide
                v-for="image in images"
                :key="image.media_id">
                <div class="swiper-zoom-container">
                    <a :href="image.originalPictureUrl">
                        <img
                            class="swiper-lazy"
                            :data-src="image.thumbnailUrl">
                        <div class="swiper-lazy-preloader"></div>
                    </a>
                </div>
            </swiper-slide>
            <div class="swiper-scrollbar" slot="scrollbar"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';

export default {
    props: ['images', 'slidesToDisplay'],
    components: {
        swiper,
        swiperSlide,
    },
    data() {
        return {
            swiperOption: {
                direction: 'horizontal',
                grabCursor: true,
                setWrapperSize: true,
                prevButton: '.swiper-button-prev',
                nextButton: '.swiper-button-next',
                scrollbar: '.swiper-scrollbar',
                observeParents: true,
                slidesPerView: this.slidesToDisplay,
                spaceBetween: 30,
                preloadImages: false,
                lazyLoading: true,
                watchSlidesVisibility: true,
            },
        };
    },
    watch: {
        images() {
            this.swiper.slideTo(0, 0, true);
        },
    },
    computed: {
        swiper() {
            return this.$refs.gallerySwiper.swiper;
        },
    },
};

[surmon-china]

1. lazyImage.vue

<template>
  <div class="swiper-lazy-box">
    <img class="swiper-lazy" :data-src="src" ref="imgEle">
  </div>
</template>

<script>
  export default {
    name: 'lazyImage',
    props: {
      src: String
    },
    updated() {
      this.$refs.imgEle.src = this.src
    }
  }
</script>

2. use

<div class="swiper-zoom-container">
     <lazy-image :src="img"></lazy-image>
     <div class="swiper-lazy-preloader"></div>
</div>

I have no better way, if you have, please leave a message.

[mqqza]

@surmon-china updated() not work. I used mounted(). swiper-lazy-preloader not deleted.

[mqqza]

@surmon-china how to set manually loading is finish?

[zeroone001]

data () {
    return {
        swiperOption: {
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false
            },
            pagination: {
                el: '.swiper-pagination'
            },
            loop: true,
            lazy: {
                loadPrevNext: true
            }
        }
    };
},