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