无法使用 vuejs 3 读取 null 的属性“标题”答案

【问题标题】：Cannot read property 'title' of null using vuejs 3无法使用 vuejs 3 读取 null 的属性“标题”
【发布时间】：2021-07-25 07:00:15
【问题描述】：

我是vuejs3 的新手，我尝试将json 与vuejs3 一起使用，我在blog / index 视图中显示了课程，当单击index 中的课程时，它会重定向到该课程的详细信息点击，就我而言，它给了我错误：Uncaught (in promise) TypeError: Cannot read property 'title' of null。

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>

blog/show.vue

<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>

路由器/index.js

  {
        path: '/blog/:id/:slug',
        name: 'post-show',
        component: Show,
        props: true
      },

数据/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": []
}

【问题讨论】：

标签： json vue.js

【解决方案1】：

问题在于您的blog/show.vue 文件。

注意在您的数据中，post 是如何设置为 null。

当您的组件挂载时，它会尝试读取post.title 和post.content，但由于post 尚不包含这些属性而失败。

获取和设置post数据的方法只在组件挂载后运行。

一种方法是不显示<h1> 和<p> 标记，直到post 数据不再是null，方法是使用v-if="post" 之类的属性

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

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

这样，当组件挂载时，属性title和content就存在了。

最后，你可以使用三元：

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

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

【讨论】：