TypeError：無法讀取未定義的屬性“標題”。 Vue.js

Question

使用 axios API 制作hackernews 克隆。 數據不會傳遞給 NewItem.vue 組件。 返回錯誤 — TypeError：無法讀取未定義的屬性“標題”。 告訴我代碼有什么問題。 為什么不傳輸數據？ 問題可能出在道具上嗎？

新項目.vue：

<template>
    <div class="news-item">
        {{ story.title }}
    </div>
</template>

<script>
export default {
  props: ['story'],
};
</script>

主頁.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>