I am currently working on setting a data property using the created lifecycle hook within my component. The issue I'm encountering is receiving a
"TypeError: Cannot read property 'summary' of undefined"forecastData as an empty object defined in the data property, rather than the populated object from created. Upon removing the data property altogether, the console displays TypeError: Cannot read property 'currently' of undefined<template>
<div>
<p>
<router-link to="/">Back to places</router-link>
</p>
<h2>{{forecastData.currently.summary}}</h2>
<router-link :to="{ name: 'forecast' }">Forecast</router-link>
<router-link :to="{ name: 'alerts' }">Alerts</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'CurrentWeather',
data () {
return {
forecastData: {}
}
},
created: function () {
this.$http.get('/api/forecast/boston').then((response) => {
this.forecastData = response.data;
}, (err) => {
console.log(err)
});
}
}
</script>
<style scoped>
</style>