TypeError: Cannot read property 'title' of undefined. Vue.js

0
votes

Making a hackernews clone using the axios API. Data is not passed to the NewItem.vue component. Returns an error — TypeError: Cannot read property 'title' of undefined. Tell me what's wrong with the code. Why is data not transmitted? Can the problem be in 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>
1
javascriptjsonvue.jsaxios

1 Answers

0
votes

You are not passing the prop from the parent to the child component, to do this:

<news-item v-for="story in stories" :key="story.id" :story="story"></news-item>