我正在使用 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 警告]：评估表达式“post.title”时出错：TypeError：无法读取 null 的属性 'title'
问题是 Vue 试图在设置帖子之前渲染模板。有没有办法在解决方法之前阻止模板渲染（这是我认为waitForData的）route.data()？
我知道我可以使用v-if，但如果可能的话，我想避免过多的 DOM 操作。