Json 无法读取属性'；标题'；使用vuejs 3设置空值

我不熟悉

vuejs3

，我尝试将

json

与

vuejs3

一起使用，我在视图

blog/index

中显示课程，当单击

index

中的课程时，它会重定向到该课程的详细信息，在我的情况下，它会给我错误：

Uncaught（承诺中）TypeError:无法读取null的属性“title”

blog/index.vue

<template lang="">
    <div class="row">
       <div class="col-md-6" v-for="post in posts">
          <h1><router-link :to="{ name: 'post-show', params: { id: post.id, slug: post.slug }}">{{ post.title }}</router-link></h1>
          <p class="lead">{{ post.content }}</p>
       </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
         posts: []
      }
    },
    mounted() {
       fetch('http://localhost:5000/posts')
          .then(res => res.json())
          .then(data => this.posts = data)
          .catch(err => console.log(err))
    },
}
</script>

<template lang="">
   <h1>{{ post.title }}</h1>
   <p>{{ post.content }}</p>
</template>
<script>
export default {

    props: ['id', 'slug'],
    data(){
        return {
            post: null
        }
    },
    mounted() {
        fetch(`http://localhost:5000/posts/${this.id}`)
          .then(res => res.json())
          .then(data => this.post = data)
          .catch(err => console.log(err))
    }
}
</script>

data/db.json

{
    "posts": [
        {
           "id": 1,
           "title"  : "learn angular",
           "slug"   : "learn-angular",
           "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, possimus."
        },
        {
           "id": 2,
           "title"  : "learn react",
           "slug"   : "learn-react",
           "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, possimus."
        },
        {
           "id": 3,
           "title"  : "learn laravel",
           "slug"   : "learn-laravel",
           "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, possimus."
        },
        {
           "id": 4,
           "title"  : "learn symfony",
           "slug"   : "learn-symfony",
           "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, possimus."
        },
        {
           "id": 5,
           "title"  : "learn jee",
           "slug"   : "learn-jee",
           "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, possimus."
        },
        {
           "id": 6,
           "title"  : "learn php",
           "slug"   : "learn-oracle",
           "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, possimus."
        }
     ],
     "users": []
}

---

问题在于您的

博客/show.vue

文件

请注意，在您的数据中，

post

如何设置为

null

当您的组件挂载时，它会尝试读取

post.title

和

post.content

，但由于

post

尚未包含这些属性，因此失败

检索和设置post数据的方法仅在安装组件后运行

一种方法是使用类似于

v-if=“post”

或者，您可以通过将帖子设置为对象来为其设置一些默认值：

post: {
   title: '',
   content: '',
}

这样，当组件装载时，属性

title

和

content

就存在了

最后，您可以使用三元：

<h1>{{ post ? post.title: '' }}</h1>
<p>{{ post ? post.content: '' }}</p>

{{post？post.title:'}
{{post？post.content:'}}

---

在这种方法中，如果存在post，它将呈现属性，否则它将呈现一个空字符串。

您在

show.vue

组件中获得的

无法读取null的属性“title”。数据
post
对象初始化为null，只有
fetch（）
函数在填充它。这意味着
fetch（）
函数不返回值，或者由于某种原因失败。
<h1>{{ post ? post.title: '' }}</h1>
<p>{{ post ? post.content: '' }}</p>