@kh1ndr
front-end dev

В slick slider на Vue js не реактивно ОТОБРАЖАЮТСЯ изображения?

Изображения прилетают с сервера (по 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>
  • Вопрос задан
  • 745 просмотров
Пригласить эксперта
Ответы на вопрос 1
@skyholder
Добавь на слайдер свойство infinity:false, слик делает клоны слайдов, для зацикленной прокрутки, и видимо в клонах слайдов картинки остаются старые, либо ты можешь через watch обновлять слайдер, у него есть метод this.$refs.slider[0].slick.refresh() типа того
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы