Jump to content
Alexis_G

onComplete not firing in Vue.js router navigation guards

Recommended Posts

Hi,

 

I'm using in components navigation guards with vue router to manage transitions between vues but can't get the onComplete firing the "next" argument:

 

  beforeRouteLeave(to, from, next) {
    const self = this
    const { Im } = self.$refs
    const tl = new self.TimelineLite
    tl.to(Im, .4, {
      y: -40, 
      opacity: 0,
      onComplete: next
    })
  }

 

So I ended up with this kind of hacky solution:

 

  beforeRouteLeave(to, from, next) {
    const self = this
    const { Im } = self.$refs
    const tl = new self.TimelineLite
    tl.to(Im, .4, {
      y: -40, 
      opacity: 0,
      // onComplete: next
    })
    setTimeout(function(){
      next()
    }, 400)
  },

 

Any ideas about how I could actually trigger the "next()" argument with the onComplete callback?

Thks.
 

Share this post


Link to post
Share on other sites

Welcome to the forums, @Alexis_G!

 

Sounds like maybe it's a scope issue. Try setting onCompleteScope: this or onCompleteScope: self. 

 

If you're still having trouble, please provide a reduced test case in codepen and we'd be happy to take a peek and see what's happening. 

 

Another option (though more verbose) is: 

onComplete:function() {
    next();
}

 

But again, I bet that setting onCompleteScope will solve things. Oh, you could do callbackScope instead because that covers all the callbacks (not just onComplete). 

 

Happy tweening!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.