Передача 'axios' в 'Swiper' с помощью Vue JS - PullRequest
Новая
       8

Передача 'axios' в 'Swiper' с помощью Vue JS

0 голосов
/ 01 марта 2019

Я работаю над простой каруселью, которая использует данные, полученные с помощью axios.У меня это работает по-другому (не используя виртуальные слайды), но из-за количества загружаемых изображений / URL я хотел бы передать его как виртуальные данные.Как передать данные, извлеченные axios, в Vue Awesome Swiper. 

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"
        v-for="(slide, index) in virtualData.slides"
        :key="index"
        :style="{left: `${virtualData.offset}px`}"
      >{{slide}}</div>
    </div>
  </div>

и 

  export default {
    data() {
      return {
        slides: (function () {
          var slides = [];
          return slides;
        }()),
        // virtual data
        virtualData: {
          slides: [],
        },
      }
    },
    mounted() {
      const self = this;
      const swiper = new Swiper('.swiper-container', {
        virtual: {
          slides: self.slides,
          renderExternal(data) {
            self.virtualData = data;
          },
        },
      });
      // axios
      var resquest = URL to API | JSON 
      axios
       .get(request)
       .then(response => {
         this.slides = response.data.data.Gallery.GalleryImage.link;
       })
    },
  };

Vue noob здесь.

...