我只是从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>