Как обновить массив данных, используя vue -awesome-slider - PullRequest
Новая
       3

Как обновить массив данных, используя vue -awesome-slider

0 голосов
/ 07 января 2020

В настоящее время я работаю с пакетом карусели под названием

vue -awesome-swiper

У меня проблемы с обновлением массива, который я передаю в v -для l oop для создания слайдов. Код ниже - это то, с чем я работаю, но я использую хак [v-if для повторной визуализации карусели при каждом переводе], чтобы позволить мне обновить массив карточек, переданный на слайдер swiper. 

      v-if="showSlider"
      :options="swiperOptions"
      ref="mySwiper"
      @slidePrevTransitionStart="handleTransitionPrevStart"
      @slideNextTransitionStart="handleTransitionNextStart"
      @slidePrevTransitionEnd="handleTransitionPrev"
      @slideNextTransitionEnd="handleTransitionNext"
    >
      <swiper-slide
        v-for="(card, index) in cards"
        ref="swiperSlide"
        :key="index"
      >
        <PassiveCard
          :index="index"
          :title="card.title"
          :subTitle="card.subtitle"
          :image="card.image"
          :button="card.buttonTitle"
          :showPaddles="false"
          :target="card.target"
          :contentPath="card.contentPath"
          :sponsorships="card.sponsorships"
          :analyticsID="card.analyticsID"
          :type="card.cardType"
        />
      </swiper-slide>
    </swiper>

Я должен пропустить базовую c вещь с Vue здесь, потому что я могу обновить массив чего-то вроде Todo, и vue обновит DOM. Однако Vue не будет повторно визуализировать DOM, если бы я должен был удалить, скажем, индекс 2 массива и заменить его другим объектом. DOM обновляется только после того, как он прошел через массив.

Цель состоит в том, чтобы всегда иметь и поддерживать 5 слайдов - обновлять указанный индекс c новыми данными после каждого перевода карусели.

Текущий swiperOptions: 

swiperOptions: {
        autoplay: {
          delay: 15000,
          disableOnInteraction: false
        },
        observer: true,
        autoHeight: true,
        loop: true,
        speed: 1000,
        shortSwipes: false,
        longSwipes: false,
        simulateTouch: false,
        allowTouchMove: false,
        // gobly goop way of centering with offset
        slidesPerView: 2,
        spaceBetween: 650,
        slidesOffsetBefore: 170,
        centeredSlides: false
      }

Чтобы было понятно, я попытался: 

1. Vue.$set.

2. this.cards[replacementIndex] = {...new Data..}

3. this.cards.splice.

4. computed property that returns new cards.
наконец, мой новый хак, который заново переводит ВСЮ карусель после перевода. Это плохо, потому что пассивная карта может быть iframe, который генерирует fla sh при повторном рендеринге данных.

Swiper js предлагает 2 способа обновления слайдов: mySwiper.addSlide(index, slides); и mySwiper.removeSlide(slideIndex);. Но синтаксис для addSlide :: slides должен быть htmldocument, поэтому он выдает ошибку, когда я передаю синтаксис шаблона vue, например: 

<swiper-slide>
  <PassiveCard
     ...options
  </PassiveCard>
</swiper-slide>

Я надеюсь, что у других возникла та же проблема и может предоставить решение, либо помогая мне передать правильный синтаксис для использования метода swiper.addSlide, либо решить основную проблему, возникающую при обновлении DOM.

Вот кодовый ящик, который у меня есть обновлен тест, показывающий методы работы с обычными htmldocuments. Спасибо за вашу помощь.

https://codesandbox.io/s/async-river-5cike?fontsize=14&hidenavigation=1&theme=dark

Большое спасибо заранее!

...