Vue.js NuxtJS-无法读取属性'；标题'；没有定义的奇怪行为

我有一个NuxtJS项目链接到DatoCMS。将显示帖子列表，单击帖子标题等，进入显示更多信息的

\u slug.vue

页面。当我点击帖子标题时，我会进入

\u slug.vue

页面，在那里我被告知“无法读取未定义的属性”title”。但是，如果我刷新该页面，它工作正常。我可以在主页和帖子页面之间来回切换，没有任何问题，直到我查看不同的帖子页面，然后问题再次出现，直到我重新加载页面。我搞不懂发生了什么事

页面目录中的

index.vue

：

通用标题
导言段

从“@/components/ProductCard”导入ProductCard；
从“graphql标签”导入gql；
导出默认值{
组成部分：{
产品卡
},
阿波罗：{
allPosts:gql`
{
所有职位{
标题
文本
鼻涕虫
}
}
`
}
};

上面调用的Components目录中的

productCard.vue

组件在底部脚本标记中没有代码，只有指向

\u slug.vue

文件的nuxt链接

{{post.title}

\u slug.vue

文件：

{{post.title}}
{{post.text}

从“graphql标签”导入gql；
导出默认值{
阿波罗：{
职位：{
查询：gql`
查询帖子（$slug:String！）{
post（筛选器：{slug:{eq:$slug}}）{
标题
文本
}
}
`,
预取（{route}）{
返回{
slug:route.params.slug
};
},
变量（）{
返回{
slug:这个。$route.params.slug
};
}
}
}
};

这是控制台的输出：

TypeError: Cannot read property 'title' of undefined
    at Proxy.render (webpack-internal:///./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./pages/_slug.vue?vue&type=template&id=286199e1&:9)
    at VueComponent.Vue._render (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3542)
    at VueComponent.updateComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4049)
    at Watcher.get (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4473)
    at new Watcher (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4462)
    at mountComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4067)
    at VueComponent.Vue.$mount (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8405)
    at init (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3115)
    at merged (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3298)
    at createComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5968)

我已经检查了关于“无法读取未定义的属性”标题的其他答案，但不幸的是，它们在本例中没有帮助

---

非常感谢您的帮助 能否提供

ProductCard.vue

组件的代码

基于您的问题，我的第一个假设是：如果

脚本

标记中没有代码，您将无法使用

模板

部分中的post属性

在

脚本

部分中添加此代码段：

导出默认值{
名称：'ProductCard'，
道具：{
post:Object
}
}

---

在此处查找更多信息：

您不能打印未初始化的post对象。要避免此错误，只需通过

v-if=“post”

{{post.title}}
{{post.text}

我也犯了同样的错误，我来到你的帖子寻找答案 但我刚刚修复了它，从我的_slug.vue中删除了这个部分

data() {
  return {
    categories: [],
  }
},

这是我的链接组件

<template>
  <div>
    <div
      class="grid w-full grid-cols-1 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 gap-x-6 gap-y-12"
    >
      <!-- Product Tile Start -->
      <div v-for="link in links" :key="link.id">
        <div>
          <div class="bg-white border rounded-t-lg shadow-sm">
            <div class="relative pb-146/3">
              <img
                class="absolute object-cover w-full h-full rounded-t-lg"
                :src="getStrapiMedia(link.thumbnail.formats.large.url)"
              />
            </div>

            <div class="relative w-full p-4 bg-white">
              <a
                :href="link.url"
                target="_blank"
                class="mb-2 text-base font-medium text-gray-800 truncate hover:text-indigo-500"
              >
                <p class="truncate">{{ link.title }}</p>
              </a>
              <p class="text-xs text-gray-600 truncate">
                {{ link.description }}
              </p>
              <div class="flex flex-wrap items-center mt-6 justify-starts">
                <span
                  v-for="tag in link.tags"
                  :key="tag.id"
                  class="px-2 py-1 mr-1 text-xs leading-none text-indigo-600 bg-indigo-200 rounded"
                  >{{ tag.name }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Tile End -->
    </div>
  </div>
</template>

<script>
import { getStrapiMedia } from '../utils/medias'

export default {
  props: {
    links: {
      type: Array,
      default() {
        return []
      },
    },
  },
  methods: {
    getStrapiMedia,
  },
}
</script>

{{link.description}}

{{tag.name}
从“../utils/medias”导入{getStrapiMedia}
导出默认值{
道具：{
链接：{
类型：数组，
默认值（）{
返回[]
},
},
},
方法：{
getStrapiMedia，
},
}

我的页面/_slug.vue是我解决问题的地方

<template>
  <div v-if="categories">
    <h1 class="w-full mb-4 text-2xl font-light text-left text-gray-600">
      {{ categories[0].name }}
    </h1>
    <Links :links="categories[0].links || []"></Links>
  </div>
</template>

<script>
import linksQuery from '~/apollo/queries/link/categories'
export default {
  // REMOVING THIS DATA ELEMENT FIXED MY ISSUE
  // data() {
  //   return {
  //     categories: [],
  //   }
  // },
  apollo: {
    categories: {
      prefetch: true,
      query: linksQuery,
      variables() {
        return { slug: this.$route.params.id }
      },
    },
  },
}
</script>

{{类别[0]。名称}
从“~/apollo/queries/link/categories”导入linksQuery
导出默认值{
//删除此数据元素修复了我的问题
//数据（）{
//返回{
//类别：[]，
//   }
// },
阿波罗：{
类别：{
预回迁：对，
查询：linksQuery，
变量（）{
返回{slug:this.$route.params.id}
},
},
},
}

---

我希望此参考资料能帮助任何其他以前没有使用过apollo的用户，但这样的消息通常意味着数据尚未加载。在您的情况下，当您访问post.title时，它位于_slug.vue中。apollo是否在nuxt呈现组件之前加载数据？否则，您必须将数据初始化为空对象。@matt hesington您设法解决了吗？我也有这个错误。@AdrianoResende嗨，Adriano，不幸的是，我没有。我用另一种方法解决了这个问题，我使用了本地链接而不是刷新页面。

<template>
  <div v-if="categories">
    <h1 class="w-full mb-4 text-2xl font-light text-left text-gray-600">
      {{ categories[0].name }}
    </h1>
    <Links :links="categories[0].links || []"></Links>
  </div>
</template>

<script>
import linksQuery from '~/apollo/queries/link/categories'
export default {
  // REMOVING THIS DATA ELEMENT FIXED MY ISSUE
  // data() {
  //   return {
  //     categories: [],
  //   }
  // },
  apollo: {
    categories: {
      prefetch: true,
      query: linksQuery,
      variables() {
        return { slug: this.$route.params.id }
      },
    },
  },
}
</script>