VueJS: Fetching image path from an API and displaying dynamic data and pictures - api

Question

I am basically trying to fetching image paths and other data from an API and render data and pictures dynamically. I tried to nest the banner and the sidebar as a components in the Home.vue file which all worked fine after taking the html, css, js from an html template. Which all works fine. But, when I after fetching the data from my API and populate the it in the DOM it does populate but is not rendered. Am I missing something here?
Home.vue
<template>
<div>
<div class="body-content outer-top-xs" id="top-banner-and-menu">
<div class="container">
<div class="row">
<template>
<SideBar />
</template>
<div class="col-xs-12 col-sm-12 col-md-9 homebanner-holder">
<Banner />
<Scroller
:newPcts=newProducts
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import SideBar from '#/components/SideBar.vue'
import Banner from '#/components/Banner.vue'
import Scroller from '#/components/Scroller.vue'
// require('#/assets/images/sliders/01.jpg'),
// require('#/assets/images/sliders/02.jpg')
export default {
name: 'home',
components: {
SideBar,
Banner,
Scroller
},
data() {
return {
newProducts: this.getNewProducts(),
bannerImages: null,
}
},
methods:{
getNewProducts(){
// get all products
axios.get("http://localhost:4000/products")
.then((response) => {
this.newProducts = response.data
})
},
}
}
</script>
Banner.vue
<template>
<div id="hero">
<div id="owl-main" class="owl-carousel owl-inner-nav owl-ui-sm">
<div
class="item"
v-for="(image, index) in bannerImgs"
:key="index"
style="background-image: url(assets/images/sliders/02.jpg);"
>
<div class="container-fluid">
<div class="caption bg-color vertical-center text-left">
<div class="slider-header fadeInDown-1">Spring 2016</div>
<div class="big-text fadeInDown-1">
Women
<span class="highlight">Fashion</span>
</div>
<div class="excerpt fadeInDown-2 hidden-xs">
<span>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit
</span>
</div>
<div class="button-holder fadeInDown-3"></div>
</div>
<!-- /.caption -->
</div>
<!-- /.container-fluid -->
</div>
</div>
<!-- /.owl-carousel -->
</div>
</template>
<script>
//require('#/assets/images/sliders/01.jpg')
export default {
data() {
return {
publicPath: process.env.BASE_URL,
bgimg: require('#/assets/images/sliders/01.jpg'),
bannerImgs: null
}
},
methods:{
getImgUrl(imgUrl) {
return require('#/'+imgUrl)
},
getBannerImages(){
// get active banners
fetch("http://localhost:4000/banners", {
method: "get"
})
.then((response) => {
return response.json()
})
.then((jsonData) => {
console.log(jsonData[0])
this.bannerImgs = jsonData[0]
// return jsonData[0]
})
}
},
created(){
// console.log("mounted ", this.publicPath)
// console.log(this.bannerImgs)
this.getBannerImages()
}
}
</script>
Scroller.vue
<template>
<div id="product-tabs-slider" class="scroll-tabs outer-top-vs wow fadeInUp">
<div class="more-info-tab clearfix">
<h3 class="new-product-title pull-left">New Products</h3>
<ul class="nav nav-tabs nav-tab-line pull-right" id="new-products-1">
<!-- <li class="active"> -->
<!-- <a data-transition-type="backSlide" href="#all" data-toggle="tab">All</a> -->
<!-- </li> -->
<!-- <li> -->
<!-- <a data-transition-type="backSlide" href="#smartphone" data-toggle="tab">Clothing</a> -->
<!-- </li> -->
</ul>
<!-- /.nav-tabs -->
</div>
<div class="tab-content outer-top-xs">
<!-- Tabs -->
<div class="tab-pane in active" id="all">
<div class="product-slider">
<div class="owl-carousel home-owl-carousel custom-carousel owl-theme" data-item="4">
<div
class="item item-carousel"
v-for="(item, index) in newPcts"
:key="index"
>
{{item.title}}
{{item.price}}
<!-- /.products -->
</div>
<!-- /.item -->
</div>
<!-- /.home-owl-carousel -->
</div>
<!-- /.product-slider -->
</div>
<!-- END TAB -->
</div>
<!-- /.tab-content -->
</div>
</template>
<script>
import axios from 'axios';
export default {
props:{
newPcts: Array
},
data(){
return {
// newProducts: []
}
},
methods:{
getProductImages(id){
let imgurl = "http://localhost:4000/mainpicture/"+id
axios.get(imgurl)
.then((response) => {
console.log(response.data)
return require('#/' + response.data)
})
}
},
computed:{
newProducts(){
axios.get("http://localhost:4000/products")
.then((response) => {
// this.newProducts = response.data
// console.log(response.data[0])
return response.data
})
}
},
async created() {
console.log('Scroller mounted')
console.log(this.newPcts)
},
mounted() {
console.log('Scroller mounted')
console.log(this.newPcts)
}
}
</script>