Question

我目前正在与vue.js和vue-router合作开展一个项目。我得到了一个显示一些新闻的vue，我从API获得了新闻（这是一种博客）。

我正在加载router.data内的新闻来设置组件的数据，如here所述。它工作得很好，没问题。

但我的问题是，当我转到这个视图时，我想要动画新闻的幻影。我已尝试使用组件中的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：

解决后，该组件还会发出一条路由数据加载的＆＃39;事件

所以：

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

如何在vue.js中的组件中加载数据时触发转换？

1 个答案: