VueJS：从API获取图像路径并显示动态数据和图片

Question

我基本上是在尝试从API获取图像路径和其他数据，并动态呈现数据和图片。我尝试将横幅和侧边栏作为组件嵌套在Home.vue文件中，在从html模板中获取html，css，js后，它们都可以正常工作。一切正常。但是，当我从API提取数据并在DOM中填充数据后，它会填充但不会呈现。我在这里想念东西吗？

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>