Creating a replica of hackernews by utilizing the axios API. The NewItem.vue component is not receiving any data, resulting in an error — TypeError: Cannot read property 'title' of undefined. Can you identify what's causing this issue in the code? Why is the data not being passed through? Is it possible that the problem lies within the props?
NewItem.vue:
<template>
<div class="news-item">
{{ story.title }}
</div>
</template>
<script>
export default {
props: ['story'],
};
</script>
Home.vue:
<template>
<div class="home">
<div class="news-view">
<div class="news-list-nav">
<span>1/23</span>
</div>
<div class="news-list">
<ul>
<li class="news-item">
<news-item v-for="story in stories" :key="story.id">
</news-item>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import NewsItem from '../components/NewsItem.vue';
const BASE_URL = 'https://api.hnpwa.com/v0/news/1.json';
export default {
components: {
NewsItem,
},
data() {
return {
stories: [],
};
},
created() {
axios
.get(BASE_URL)
.then((response) => {
this.stories = response.data;
});
},
};
</script>