TypeError：无法读取未定义的属性“标题”。 Vue.js

Question

使用 axios API 制作hackernews 克隆。数据不会传递给 NewItem.vue 组件。返回错误 — TypeError: Cannot read property 'title' of undefined. 告诉我代码有什么问题。为什么不传输数据？问题可能出在道具上吗？

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>

Answer 1

您没有将 prop 从父组件传递给子组件，这样做：

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