VueJS：TypeError：重新加载时无法读取undefined的属性

Question

我有一个这样的页面：

<template>
  <div class="row flex">
    {{posts.id}}
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    async asyncData ({ route }) {
      let { data } = await axios.get('http://localhost:8000/api/v1/feeds/' + route.params.id + '/')
      return {
        posts: data
      }
    }
  }
</script>

当我点击热重载链接（路由器链接）时，它显示良好。但是当我重新加载这个窗口时，它会在1秒后出现并消失。

视频：http://g.recordit.co/ht0a0K2X81.gif

错误日志：

我该如何解决这个问题？

Answer 1

为您的数据添加属性，即dataLoaded: false。当您的ajax请求完成后，请设置this.dataLoaded = true。在您的模板上添加v-if="dataLoaded。这意味着模板数据不会呈现，直到您准备好。

你也可以用v-if="posts"作为另一种方式，但我通常有一致的dataLoaded道具可以做到这一点。

编辑：我刚看了你的例子，做这样的事情会起作用：

<template>
  <div class="row flex" v-if="posts">
    {{posts.id}}
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data () {
        return {
            posts: null
        }
    }
    methods:{ 
        loadPosts () {
            return axios.get('http://localhost:8000/api/v1/feeds/' + this.$route.params.id + '/')
        }
    },
    created () {
        this.loadPosts().then(({data}) => {
            this.posts = data
        })
    }
  }
</script>

我已删除了async，只是在axios请求返回其承诺时设置帖子。然后在模板上，它只显示posts有效。

修改

您也可以使用原始代码，只需将v-if="posts"添加到模板中的div中。