Question

我正在做一个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>

Answer 1

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

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

Answer 2

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

Answer 3

在我的情况下，我在context.params.id

中缺少.id

简单的监督。

Nuxt：无法读取未定义的属性“ title”

3 个答案: