我正在使用 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 方法返回一个 promise ，当解析时返回插入到组件数据中的 post 对象。
这一切都工作正常，一旦加载帖子，帖子标题就会显示在页面中，但控制台会抛出警告:
[Vue warn]: Error when evaluating expression "post.title": TypeError: Cannot read property 'title' of null
问题是 Vue 试图在设置帖子之前渲染模板。有没有办法阻止模板渲染(这就是我认为 waitForData 的用途)，直到 route.data() 方法得到解析？
我知道我可以使用 v-if 但我希望尽可能避免过多的 DOM 操作。
最佳答案
http://router.vuejs.org/en/pipeline/data.html
推荐的方法是将依赖于加载数据的内容放入:
<div v-if="!$loadingRouteData"></div>
关于javascript - 推迟 Vue block 的渲染，直到数据加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38461845/