У меня есть 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, но это также не срабатывает постоянно.
Быть может кто-то сталкивался с такой проблемой? Буду очень благодарна.
Средний
