VueJS：TypeError：重新加载时无法读取未定义的属性

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