データがロードされるまで、Vueブロックの描画を無効にする

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のポストの前にテンプレートをレンダリングしようとしているという問題を

[Vue warn]: Error when evaluating expression "post.title": TypeError: Cannot read property 'title' of null

設定されています。 route.data()メソッドが解決されるまで、テンプレートレンダリングを防止する方法がありますか（これは私がwaitForDataです）。

私はv-ifを使用できますが、可能であれば、過剰なDOM操作を避けたいと思います。

Answer 1

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

推奨されるアプローチは、内側にロードされたデータに依存しているものにすることです：

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