Question

我在Vue-js中还很陌生，我正在尝试使用this。

我的应用程序不是SPA，而且我还在与Laravel合作。

我已经尝试过了，效果很好：

const app = new Vue({
    el: '#app',
    mounted() {
        this.myLazyLoad = new LazyLoad({
            elements_selector: '.lazy',
            class_loaded: 'lazy-loaded',
            load_delay: 500, //adjust according to use case
            threshold: 100, //adjust according to use case,
            callback_enter: function(el) {
                console.log(el.getAttribute("data-src"));
            }
        }); 
    }
});

 <img data-src="{{ $featuredItem->anime->getPortraitImg()}}" 
    class="lazy img-fluid" src="/img/placeholder-anime.jpg">

但是当我尝试在组件中使用lazyload时出现问题。例如：

export default {
  mounted() {
        console.log('Component mounted.');
        console.log(Vue.prototype.LazyLoad);

        this.myLazyLoad = new LazyLoad({
            // elements_selector: '.lazyx',
            container: document.getElementById('lazyContainer')                
        });

        // myLazyLoad.loadAll();
    },
    data() {
        return {
            episodes: {},
            currentPage: 2      
        }  
    },
    methods: {
        loadMoreEpisodes() {
            let uri = '/api/v1/episodes?page=' + this.currentPage;

            this.axios.get(uri).then(response => {
                console.log(response.data.data);

                if (this.episodes.length === undefined) {
                    this.episodes = response.data.data;
                } else {
                    this.episodes = this.episodes.concat(response.data.data);
                }

                this.myLazyLoad.update();
                this.myLazyLoad.loadAll();
            });
        }
    }
}

axios插件无法识别lazyload插入的新数据。

我正在按照文档中的说明使用this.myLazyLoad.update();，但无法使其正常工作。有什么建议吗？

Answer 1

我认为当您调用update()方法时DOM不会更新。您可以尝试使用$nextTick吗？

this.$nextTick(() => {
  this.myLazyLoad.update()
})

在vuejs中使用vanilla-lazyload

1 个答案: