json - 无法使用 vuejs 3 读取 null 的属性 'title'

Question

我是 vuejs3 的新手，我尝试将 json 与 vuejs3 一起使用，我在 blog/index< 中显示了类(class)，当点击 index 中的类(class)时，它会重定向到该类(class)点击的详细信息，在我的例子中，它给我错误:Uncaught (in promise) TypeError: Cannot read property “标题”为 null。

博客/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>

博客/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>

Router/index.js

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

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

Answer 1

问题出在你的blog/show.vue上文件。

注意你的数据，post设置为 null .

当您的组件安装时，它会尝试读取 post.title和 post.content但它失败了，因为 post尚不包含这些属性。

获取和设置发布数据的方法仅在组件挂载后运行。

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

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

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

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

最后，您可以使用三元组:

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

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