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