nastya_zholudeva @nastya_zholudeva

Как сделать так, чтобы события jquery кода навешивались на элементы только после того, как все данные на стороне сервера подгрузятся?

У меня есть jQuery код такого типа

function init() {
    initRelatedGoodsCarousel();
    tags();
..........
};

function initRelatedGoodsCarousel() {
        $('.owl-related').owlCarousel({
            loop:true,
            nav:true,
            dots:false,
            responsiveClass:true,
            responsive:{
                0:{
                    items:2
                },
                600:{
                    items:4
                },
                1000:{
                    items:6,
                    margin:0,
                    autoplay:true,
                    autoplayTimeout:80000,
                }
            }
        });
}

function tags() {
    $('#list_tags li').each(function(){
        posDiv($(this));
        randomSize($(this));
    });
    $('.wrap_search_tag').hover(function(){
            $('#list_tags li').each(function(){
                animateDiv($(this));
            });
        },
        function(){
            $('#list_tags li').stop();
        });
........
}

Для того, чтобы он срабатывал после того, как vue js построит DOM я в нужном мне компоненте использовала такой скрипт

<script>
    import axios from 'axios'
    import callApi from '~/libraries/api.js'
    export default {
        name: 'Tags',
        data () {
            return {
                tags: []
            }
        },
        updated() {
            this.$nextTick(function () {
                setTimeout(() => {
                    init();
                }, 1000)
            })
        },
        created: function () {
            this.$nextTick(function () {
                callApi('tags', '', '').then((res) => {
                    this.tags = res.data.data;
                });
            })
        }
    }
</script>

то есть в updated() вызывала функцию init() из jQuery кода, а данные с REST API я подгружала с помощью callApi() в created.

Однако такой подход срабатывает не каждый раз. Если страница чуть быстрее/медленнее загрузилась, то события из jQuery кода не успевали навешиваться. Пришлось даже с помощью setTimeout()замедлять функцию init(), но это также не каждый раз срабатывало.
Также пробовала данные с API загружать с помощью Vuex store, но это также не срабатывает постоянно.

Быть может кто-то сталкивался с такой проблемой? Буду очень благодарна.