Nuxt：无法读取未定义的属性“标题”答案

【问题标题】：Nuxt: Cannot read property 'title' of undefinedNuxt：无法读取未定义的属性“标题”
【发布时间】：2019-03-27 15:07:08
【问题描述】：

我正在执行Nuxt tutorial，但我无法弄清楚为什么我不断收到此Cannot read property 'title' of undefined 错误。有什么我遗漏的吗，或者自教程发布以来 Nuxt/Vue 是否已更新？

食谱页面：

 <template>
      <section class="recipes">
        <Recipe
          v-for="recipe in recipes"
          :key="recipe.id"
          :id="recipe.id"
          :thumbnail="recipe.thumbnail"
          :title="recipe.title"
          :description="recipe.description"
        />
      </section>
    </template>

    <script>
    import Recipe from '@/components/Recipe';

    export default {
      components: {
        Recipe
      },
      asyncData() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
              recipes: [
                {
                  id: 23,
                  title: "Gatsby",
                  description: "Eat Gatsby",
                  thumbnail: "http://www.eatout.co.za/wp-content/uploads/2016/10/gatsby.jpg"
                },
                {
                  id: 26,
                  title: "Rolly",
                  description: "Eat Rolly",
                  thumbnail: "http://www.prontomama.co.za/wp-content/uploads/2011/11/Pronto-Mama-Recipe-Boerewors-Rolls.jpg"
                }
              ]
            })
          },1500)
        })
      }
    }
    </script>


    <style scoped>
    .recipes {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
    }

    </style>

食谱详情页面

<template>
  <section class="single-recipe">
    <h1>{{ recipe.title }}</h1>
    <div>
      <img :src="recipe.thumbnail" :alt="recipe.title">
    </div>
    <p>{{ recipe.description }}</p>
  </section>
</template>

<script>
export default {
    asyncData(context) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          recipe: [
            {
              id: 23,
              title: "Gatsby",
              description: "Eat Gatsby",
              thumbnail: "http://www.eatout.co.za/wp-content/uploads/2016/10/gatsby.jpg"
            },
            {
              id: 26,
              title: "Rolly",
              description: "Eat Rolly",
              thumbnail: "http://www.prontomama.co.za/wp-content/uploads/2011/11/Pronto-Mama-Recipe-Boerewors-Rolls.jpg"
            }
          ].find(i => i.id === context.params.id) // to simulate single item selection
        })
      },1500)
    })
  }
}
</script>

<style>
.single-recipe {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
}
</style>

【问题讨论】：

Nuxt: Cannot read property 'title' of undefined的可能重复
@Badgy 感谢您发现这一点。我第一次尝试发帖时遇到了问题。

标签： vue.js nuxt.js

【解决方案1】：

nuxt 中的组件没有 asyncData/fetch 方法。它仅适用于页面组件。参考https://nuxtjs.org/api/

每次加载组件之前都会调用asyncData（仅适用于页面组件）。

【讨论】：

我可以确认这是我遇到的问题。我试图在组件中使用 asyncData。现在有解决方法，例如像我在下面那样使用 fetch。这是参考：nuxtjs.org/docs/2.x/features/data-fetching/…async fetch() { const content = await import("~/data/components/CarouselFeatures/en.yaml"); this.content = content.default; }

【解决方案2】：

context.params.id 是一个字符串，对象数组中的id 是一个整数，因此find() 没有返回预期的对象。将id 更改为对象数组中的字符串修复了错误。

【讨论】：

【解决方案3】：

在我的情况下，我在 context.params.id 中缺少 .id

简单的监督。

【讨论】：