Currently, I am immersed in a project utilizing vue.js and vue-router. Within my Vue application, I have a section dedicated to displaying news fetched from an API that functions as a blog.
To load this news data into the component, I am utilizing the router.data method, as outlined here. The process is going smoothly without any issues.
However, I am facing a challenge when it comes to animating the appearance of the news items upon transitioning to this particular view. I attempted using the ready property within the component, but encountered a timing issue – the animation is triggered before the news data has completely loaded, causing errors due to missing elements.
Is there a way for me to initiate these animations only after the fetched news content is fully rendered within the DOM?
The code snippet below showcases my current component setup:
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()
}
}