使用Vue JS将'axios'传递给'Swiper'

时间:2019-03-01 14:02:08

标签: javascript vue.js swiper

我正在研究一个简单的轮播,该轮播使用通过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菜鸟在这里。

0 个答案:

没有答案