Изображения прилетают с сервера (по 3-4 штуки) и передаются в компонент слайдера для отображения.
Изображения всегда приходят нужные, тут все в порядке. Но в слайдере они либо вообще не обновляются, либо с большой задержкой (3-5-7 секунд). Я попытался добавить к каждому изображению filetime через computed, но это не помогло.
Возможно ли это как то побороть?
Заранее спасибо.
Код компонента (Слайдер):
<template>
<div style="min-height: 300px" v-if="item.images">
<div v-if="item.images.length > 1">
<VueSlickCarousel :arrows="true" :dots="false">
<img
class="w-100"
v-for="img in (imagesFT = item.images)"
:key="img.id"
:src="img.image"
/>
</VueSlickCarousel>
</div>
<div v-else>
<img
class="w-100"
v-for="img in (imagesFT = item.images)"
:key="img.id"
:src="img.image"
/>
</div>
</div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
export default {
name: 'SliderConfigurator',
data: () => ({
src: 'https://templatesite.ru/images/items/',
}),
components: {
VueSlickCarousel
},
props: {
item: {
type: Object,
default: () => {}
}
},
methods: {},
computed: {
imagesFT: {
get: function() {
return this.item.images
},
set: function(images) {
images.map( el => el.image + "?" + new Date().getTime() )
console.log(images)
this.item.images = images
}
}
},
mounted() {},
}
</script>
