如何在vue.js中的组件中加载数据时触发转换？-Java 学习之路

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

1 回答

0
来自docs：

解析后，组件还将发出'route-data-loaded'事件 .

所以：
```
events: {
  'route-data-loaded': function() {
    animateNewsApparition()
  }
}
```
回复于 2024-05-03T18:12:09+08:00

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

1 回答

相关问题