Доброго времени суток!
У меня есть слайдер с шаблоном
<slider>
<slide>1</slide>
<slide>2</slide>
<slide>3</slide>
</slider>
В таком виде все прекрасно работает :) Но мне нужно адаптировать его под загрузку слайдов с сервера. Сейчас в компоненте Slider я инициализирую слайды через слоты:
initSlides() {
this.slides = this.$slots.default.filter((item) => item.componentOptions);
this.slides.forEach((item, index) => {
item.componentOptions.propsData.index = index;
});
}
Этот метод вызывается в хуке created. Далее, структура шаблона, при подкгрузке слайдов из store (а оттуда соответственно из бд):
<slider :itemsToShow="4" :controls="true" :pagination="true" :autoPlay="false">
<slide v-for="(screen, i) in screenshots" :key="'screen' + i">
<img :src="screen" alt="">
</slide>
</slider>
Screenshots - как раз массив, который подгружается из бд с помощью axios.
Возвращаясь к JS, я понимаю, что на момент хука created слайды (а точнее $slots.default) еще не прогрузились и не примонтированы, поэтому консоль ругается, что не может их отфильтровать и отсюда начинаются баги.
Получается, мне нужно изменить как-то этот кусочек кода, но пока не пойму как, помогите пожалуйста!
methods: {
initSlides() {
this.slides = this.$slots.default.filter((item) => item.componentOptions);
this.slides.forEach((item, index) => {
item.componentOptions.propsData.index = index;
});
}
},
created() {
this.initSlides();
}
