Slider Section (Gray Part) We verified after loading, and the data was spot on. In development mode (F12), we can inspect object information (ImgURL, Text, etc.). However, it is not being displayed.
Below is the template code and script code. Thank you.
<template>
<div class="home-slider-container" v-if="hasResult">
<div class="home-slider owl-carousel">
<div class="home-slide" v-for="(banner, index) in banners">
<div class="slide-bg owl-lazy" v-bind:data-src=banner.imgUrl></div><!-- End .slide-bg -->
<div class="home-slide-content container">
<div class="row">
<div class="col-md-6 offset-md-6 col-lg-5 offset-lg-7">
<h4>{{banner.topText}}</h4>
<h1>{{banner.middleText}}</h1>
<h3><strong>{{banner.bottomText}}</strong></h3>
<a href="category.html" class="btn btn-primary">Go Now</a>
</div><!-- End .col-lg-5 -->
</div><!-- End .row -->
</div><!-- End .home-slide-content -->
</div><!-- End .home-slide -->
</div><!-- End .home-slider -->
</div><!-- End .home-slider-container -->
</template>
<script>
export default {
name: 'MainHomeSlider',
data: function () {
return {
banners: []
}
},
computed: {
hasResult: function () {
return this.banners.length > 0
}
},
created() {
const baseURI = 'Server API address';
this.$http.get(`${baseURI}/v1.0/banners`)
.then((result) => {
console.log(result.data.result.banners)
console.log(typeof (result.data.result.banners))
this.banners = result.data.result.banners
})
}
}
</script>
CSS Styles for OWL Carousel:
.owl-carousel {
/* CSS styles */
}
...
/* Other CSS styles here */
...
.owl-carousel.owl-rtl .owl-item {
float: right;
}
You can request the API from
Data Structure: I confirmed that the Img URL should be accessible. {"result": {"banners": [{"topText":"Banner test","middleText":"Banner test","bottomText":"Banner test","imgUrl":"ImgURL"}, {"topText":"Banner test","middleText":"Banner test","bottomText":"Banner test","imgUrl":"ImgURL"}]} ,"message":"OK","status":200}