0

我目前正在使用 vue.js 和 vue-router 开发一个项目。我有一个显示一些新闻的 vue，并且我从一个 API（它有点像博客）获得了这些新闻。

我目前正在加载这些新闻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()
  }
}
4

1 回答 1

0

从文档：

解决后，该组件还将发出一个 'route-data-loaded' 事件。

所以：

events: {
  'route-data-loaded': function() {
    animateNewsApparition()
  }
}
于 2016-07-12T11:05:41.333 回答