vue.jsのコンポーネントにデータが読み込まれたときに遷移をトリガする方法は？

Question

私は現在vue.jsとvue-routerのプロジェクトに取り組んでいます。私はいくつかのニュースを表示し、私はAPI（それはブログのようなものです）からニュースを得ました。

私は現在、hereのように、コンポーネントのデータを設定するためにrouter.dataの内部にニュースを読み込んでいます。それは偉大な、問題なく動作しています。

しかし私の問題は、私がこのビューに行くときにニュースの出現をアニメーション化したいということです。私はコンポーネントからreadyプロパティを使用しようとしましたが、router.dataがニュースを取得する前に呼び出されています。その結果、要素がないため、アニメーションにエラーが発生します。

フェッチしたニュースがDOM内で完全にレンダリングされたら、どのようにアニメーションをトリガーできますか？ここで

は私のコンポーネントのコードです：

export default { 
    name: 'News', 
    data: function() { 
    return { 
     news: [] 
    } 
    }, 
    route: { 
    data: function (transition) { 
     console.log('data hook') 
     return api 
     .getPostsByLimit(4, 1) 
     .then(function (posts) { 
     for (var i = 0; i < posts.length; i++) { 
      var post = posts[i] 
      post.formatedDate = moment(post.date).format("D MMM. YYYY") 
      post.dateTime = moment(post.date).format("YYYY-MM-DD") 
      if(post.news_artist_related) { 
      post.news_artist_related = JSON.parse(post.news_artist_related) 
      post.news_artist_related.type = slugify(post.news_artist_related.type) 
      post.news_artist_related.slug = slugify(post.news_artist_related.slug) 
      } 
     } 
     return posts 
     }) 
     .then(news => ({news})) 
    } 
    }, 
    ready: function() { 
    console.log('Ready hook') 
    animateNewsApparition() 
    } 
} 

Answer 1

docsから：解決すると

、コンポーネントも「ルート・データ・ロードされた」イベントを発します。

ので：

events: { 
    'route-data-loaded': function() { 
    animateNewsApparition() 
    } 
}