использовать vanilla-lazyload с vuejs - PullRequest
Новая
       26

использовать vanilla-lazyload с vuejs

0 голосов
/ 11 июля 2019

Я довольно новичок в 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();, как указано в документации, но я не могу заставить его работать. Есть предложения?

1 Ответ

0 голосов
/ 12 июля 2019

Я думаю, что DOM не обновляется при вызове метода update(). Можете ли вы попробовать использовать $nextTick? 

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