Wie löst man einen Übergang aus, wenn Daten in die Komponente in vue.js geladen werden?

Question

ich arbeite gerade an einem Projekt mit vue.js und vue-router. Ich habe eine Anzeige, in der ich einige Neuigkeiten zeige, und ich habe diese Nachrichten von einer API bekommen (es ist eine Art Blog).

Ich lade gerade diese Nachrichten innerhalb der router.data, um die Daten für die Komponente einzustellen, wie gesagt here. Es funktioniert super, keine Probleme.

Aber mein Problem ist, dass ich die Erscheinung der Nachrichten animieren möchte, wenn ich zu dieser Ansicht gehe. Ich habe versucht, die ready Eigenschaft aus der Komponente zu verwenden, aber es wird aufgerufen, bevor die router.data fertig ist, die Nachrichten zu erhalten, die zu Fehlern in der Animation führen, weil es keine Elemente gibt.

Wie kann ich die Animationen auslösen, sobald die Nachrichten, die ich hole, vollständig im DOM gerendert werden? Hier

ist der Code meiner Komponente:

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

Vom docs:

Wenn aufgelöst, wird die Komponente auch emittieren ein 'Route-Daten-geladen' Ereignis.

So:

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