无法读取属性 'title' 的 null - nuxt.js 中的错误消息

Question

在 pages 文件夹下，我有一个名为 'postings' 的子文件夹，其中存储了另一个名为“_quidproquo”的子文件夹。最后一个子文件夹包含一个名为 'index.vue' 的文件。我收到一条错误消息，指出它无法为我的 nuxt.js 代码读取属性 'title' of null。有人可以告诉我哪里出错了吗？

<template>
  <div class="single-post-page">
   <section class="post">
    <h1 class="post-title">
      {{ loadedPost.title }}
    </h1>
  <div class="post-details">
    <div class="post-detail">
      Last updated on {{ loadedPost.updatedDate | date }}
    </div>
    <div class="post-detail">
      Written by {{ loadedPost.author }}
    </div>
  </div>
  <p class="post-content">
    {{ loadedPost.content }}
  </p>
</section>
<section class="post-feedback">
  <p>Let me know what you think about the project, send an email to: <a href="mailto: blahblah@blah.com">meh@meh.com</a>.</p>
</section>
</div>
</template>

<script>
// import PostList from '@/components/Posts/PostList'
// import axios from 'axios'

export default {

  middleware: 'log',

  components: {
// PostList
  },

  asyncData (context) {
    return context.app.$axios.$get('/posts/' + context.params.id + '.json')
     .then((data) => {
     return {
      loadedPost: data
    }
  })
  .catch(error => context.error(error))
  }
}

</script>

<style scoped>
.single-post-page {
    padding: 30px;
    text-align: center;
    box-sizing: border-box;
    height:93vh;
}

.post {
    width: 100%;
}

@media (min-width: 768px) {
 .post {
    width: 600px;
    margin: auto;
    }
}

.post-title {
 margin: 0;
}

.post-details {
    padding: 10px;
    box-sizing: border-box;
    flex-direction: row;
    border-bottom: 3px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media (min-width: 768px) {
    .post-details {
        flex-direction: row;
    }
}

.post-detail {
    color: rgb(88, 88, 88);
    margin: 0 10px;
}

.post-feedback a {
    color: red;
    text-decoration: none;
}

.post-feedback a:hover,
.post-feedback a:active {
    color: blue;
}
</style>

Answer 1

您正在调用 'loadedPost' 对象的 'title' 属性，但存在一些问题：

在 vue 实例的计算对象或数据对象中没有任何名为 'loadedPost' 的东西
您正在 API 呼叫中呼叫 'loadedPost'，这可能需要一些时间才能解决结果

因此，您可以执行以下操作：

在vue数据对象中定义loadedPost为空对象
在 API 调用解决后更新 loadedPost

这是演示：

vue 模板：

<template>
    // ...
    <h1>{{ loadedPost.title }}</h1>
    // ...
</template>

脚本部分：

//...
export default {
data() {
  return {
    loadedPost: {},
  };
},
methods: {
  apiCall() {
    apiCallFunction().then((result) => { this.loadedPost = result });
  },
},
}

这样当 loadedPost 更新时，模板也会更新。

无法读取属性 'title' 的 null - nuxt.js 中的错误消息

Cannot read property 'title' of null - error message in nuxt.js

vue.js

nuxt.js

nuxtjs

无法读取 属性 'title' 的 null - nuxt.js 中的错误消息

Cannot read property 'title' of null - error message in nuxt.js

vue.js

nuxt.js

nuxtjs

无法读取属性 'title' 的 null - nuxt.js 中的错误消息