I am still new to Vue and navigating my way through the learning process. I have been able to successfully fetch data from an endpoint, which is returned as an object. The object is making it into the component as verified by both the devtools and on the page. However, despite having all the necessary data, I am struggling to access the url property that exists within the info object. My attempts so far have not yielded any positive results.
Here is the error message I am encountering:
TypeError: Cannot read property 'url' of nullI am wondering if there might be a different approach or lifecycle method that I should be utilizing for handling async behaviors?
<template>
<div class="SpaceImage">
<img :src="info.url" />
<p>{{info}}</p>
</div>
</template>
<script>
import axios from "axios";
import { API_KEY } from "../../API_KEY/API_KEY";
export default {
name: "SpaceImage",
data() {
return {
info: {},
imnageData: ''
};
},
created() {
axios
.get(`https://api.nasa.gov/planetary/apod?api_key=${API_KEY}`)
.then(response => (this.info = response))
.catch(error => console.log(error));
}
};
</script>
<style>
.SpaceImage {
border: 1px solid red;
height: 100px;
width: 100px;
}
img {
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>