vue.js - 将 vanilla-lazyload 与 vuejs 一起使用

Question

我是 Vue-js 的新手，我正在尝试使用它。

我的应用程序不是 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();按照文档中的说明使用，但我无法让它工作。有什么建议么？

标签： vue.jslazy-loading

Answer 1

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

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