Question

我使用Vue和Vue路由器。一个常见的问题是在加载显示某种外部资源的组件时需要进行异步加载。

假设我有一个简单的Vue组件，它显示从外部仓库加载的帖子的标题：

<template>
  <div>
    {{ post.title }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      post: null
    }
  },

  route: {
    waitForData: true,
    data () {
      return postRepo.fetch(this.$route.params.id)
      .then(post => {
        return {post: post}
      })
      .catch(err => { console.warn(err) })
    }
  }
}
</script>

我的路由data方法返回一个承诺，当解析时返回插入到组件数据中的post对象。

一切正常，一旦帖子加载，帖子标题会显示在页面中，但是控制台会发出警告：

[Vue警告]：评估表达式时出错＆＃34; post.title＆＃34;：TypeError：无法读取属性＆＃39; title＆＃39;为null

问题是Vue在设置帖子之前尝试渲染模板。有没有办法阻止模板呈现（这是我认为waitForData的用途），直到route.data()方法得到解决？

我知道我可以使用v-if但我希望尽可能避免过多的DOM操作。

Answer 1

http://router.vuejs.org/en/pipeline/data.html

推荐的方法是将依赖于加载数据的东西放在：

中

<div v-if="!$loadingRouteData"></div>

在数据加载之前，对Vue进行渲染

1 个答案: