VueJS组件未呈现数据

Question

我只是从Vue和单个文件组件开始。我正在尝试渲染两个组件。一个是显示小行星数据列表的表格。另一个包含来自NASA当天API的天文学图片的两个图像。

我已经成功渲染了AsteroidGrid组件，正在从端点接收数据，并且运行良好，可以删除行。

但是我的第二个组件似乎不起作用。它正在呼叫两个NASA端点并成功接收到响应数据。但是由于某种原因，数据（imgSrc和imgTitle）没有填充我的组件。

https://vue-mazzo.herokuapp.com/#

这是我的App.vue文件

<template>
  <div id="app">

 <Apod>
    <h3 slot="title">#1</h3>
    <p slot="caption">Here' today's Astronomy Picture of the Day</p>
  </Apod>

  <Apod date="2018-08-07">
    <h3 slot="title">#2</h3>
    <p slot="caption" slot-scope="pic">Here's the picture from {{pic.date}} 
   </p>
  </Apod>

  <AsteroidGrid @remove="remove" :asteroids="asteroids" header="Near-Earth 
Objects"/>

  </div>
</template>
    <script>
    import AsteroidGrid from './components/AsteroidGrid.vue'
    import Apod from './components/Apod.vue'
    import axios from 'axios'

    export default {
        name: 'app',
        components: {
          AsteroidGrid,
          Apod

    },
    data() {
      return{
        asteroids: [],
        showSummary:true,
        imgSrc: '',
        imgTitle: ''
        }

    },
    created: function(){
        this.fetchAsteroids();
        this.fetchApod();
    },

    methods: {
        fetchAsteroids:function(){
            var apiKey = 'WjNITMO5uO6l4E0HeLKxmwdmF25SdRn4KXcsxDbY';
            var url = 'https://cors- 
        anywhere.herokuapp.com/http://737798.youcanlearnit.net/neos.json';
        axios.get(url)
            .then(res => {
                console.clear();
                console.log(res);
                this.asteroids = res.data.near_earth_objects.slice(0,10);
                //vm.asteroids = res.data.near_earth_objects.slice(0,10);
            });
    },

    remove:function(index){
        //this.$emit('remove', index);
        this.asteroids.splice(index,1);
        // this.asteroids = [];
    },
    fetchApod: function(){
              var apiKey = 'WjNITMO5uO6l4E0HeLKxmwdmF25SdRn4KXcsxDbY';
              var url = 'https://api.nasa.gov/planetary/apod?api_key=' + apiKey;


              if(this.date){
                  url += '&date=' + this.date;
              }
             var self = this;
              axios.get(url)
                  .then(function (res) {
                      console.clear();
                      console.log(res);
                      self.imgSrc = res.data.url;
                      self.imgTitle = res.data.title;
                  });
          }   
    }//end methods
}//end export default
</script>

<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */

 [v-cloak] {
        display: none;
    }
</style>

这是我的Apod.vue文件

<template>
    <div class="col-lg-6 col-xl-6">
        <slot name="title"><h3>Untitled</h3></slot>
        <img width="300" height="200" :src="imgSrc" :title="imgTitle">
        <!--<p>{{date || "today"}}</p>-->
        <slot name="caption" :date="date"><p>unkown date</p></slot>
     </div>
</template>

<script>
    export default {
    props: ['date'],
    data: function(){
        return {
        imgSrc: '',
        imgTitle: ''
        }
    },
    created: function(){

    this.fetchApod();
},

methods:{
        fetchApod: function(){
            var apiKey = 'WjNITMO5uO6l4E0HeLKxmwdmF25SdRn4KXcsxDbY';
            var url = 'https://api.nasa.gov/planetary/apod?api_key=' + apiKey;


            if(this.date){
                url += '&date=' + this.date;
            }

            axios.get(url)
                .then(res => {
                    console.clear();
                    console.log(res);
                    this.imgSrc = res.data.url;
                    this.imgTitle = res.data.title;
                });
        }   
    } //End methods
 }//End export default
</script>