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

【问题标题】：How to trigger transition when data is loaded in component in vue.js?如何在 vue.js 的组件中加载数据时触发转换？
【发布时间】：2016-07-12 10:22:23
【问题描述】：

我目前正在使用 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()
  }
}

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

来自docs：

解决后，该组件还将发出“route-data-loaded”事件。

所以：

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

【讨论】：