VueJS: TypeError: Cannot read property of undefined when Reload

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>

当我用热重载（router-link）点击link时，它显示良好。但是当我重新加载这个 window 时，它会在 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 请求时设置帖子 returns 这是承诺。然后在模板上，它只显示 posts 是有效的。

编辑

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

VueJS: TypeError: Cannot read property of undefined when Reload

VueJS: TypeError: Cannot read property of undefined when Reload

vue.js

vue-router

nuxt.js