vue.js의 구성 요소에 데이터가로드 될 때 전환을 트리거하는 방법은 무엇입니까?

저는 현재 vue.js 및 vue-router 프로젝트에서 작업하고 있습니다. 나는 몇 가지 뉴스를 표시하는 vue를 얻었고 API (그것은 블로그의 일종)에서 소식을 얻었습니다.vue.js의 구성 요소에 데이터가로드 될 때 전환을 트리거하는 방법은 무엇입니까?

현재 here과 같이 구성 요소의 데이터를 설정하기 위해 router.data 내부에 뉴스를로드 중입니다. 그것은 위대한, 아무런 문제가 일하고있어.

그러나 내 문제는 내가이보기로 갈 때 뉴스의 유령을 움직이기를 원한다는 것입니다. 구성 요소의 ready 속성을 사용하여 시도했지만, 요소가 없으므로 router.data이 뉴스를 가져 오기 전에 호출되므로 애니메이션에 오류가 발생합니다.

내가 가져온 뉴스가 DOM 내부에 완전히 렌더링되면 어떻게 애니메이션을 트리거 할 수 있습니까? docs에서

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() 
    } 
}

출처

2016-07-12 Art2B

: 해결하면

이 구성 요소는 또한 '경로 데이터로드'이벤트를 방출합니다 여기

는 내 구성 요소의 코드입니다.

그래서 :

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

출처

2016-07-12 11:05:41

vue.js의 구성 요소에 데이터가로드 될 때 전환을 트리거하는 방법은 무엇입니까?

답변

관련 문제