DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Raymond Camden
Raymond Camden

Posted on • Originally published at raymondcamden.com on

What is $nextTick in Vue and When You Need It

I’ve been using Vue heavily for a while now and this week I ran into an issue that I’ve never seen before. It’s something documented and pretty well known (when I tweeted about it I got a reply in about 60 seconds) but I just had not hit it before. Before I get into $nextTick, let me explain what I was doing and what went wrong.

I have a hidden form on a page that needs to have a dynamic action value. Consider this markup:

<div id="app" v-cloak>
  <form :action="myAction" method="post" ref="myForm">
    <button @click.prevent="testAction">Test</button>
  </form>
</div>

Enter fullscreen mode Exit fullscreen mode

And this code:

Vue.config.productionTip = false;
Vue.config.devtools = false;

const app = new Vue({
  el:'#app',
  data: {
    myAction:null
  },
  methods:{
    testAction() {
      this.myAction = 'http://www.raymondcamden.com';
      this.$refs.myForm.submit();
    }
  }
})

Enter fullscreen mode Exit fullscreen mode

Looks simple enough, right? Probably the only interesting thing here is the use of ref and this.$refs to handle accessing the DOM directly with Vue. I call it fancy because it isn’t something I usually need to do with Vue. So what happens when you test this? Try it yourself and see:

Instead of POSTing to my server, it sends the POST directly to CodePen, and just today I discovered they support echoing back the data which is kind of cool! (Note, in the embedded CodePen above, the POST echo doesn’t work. It may not be a feature of the embed.)

Alright, so what the heck went wrong? Well, if you’re like me, you may not have read the β€œInternals” section of the Vue.js documentation, specifically this part: Async Update Queue.

In case you haven’t noticed yet, Vue performs DOM updates asynchronously.

Raise your hand if you hadn’t noticed this yet.

Ray raising his hand

Luckily there’s a simple fix for this and if you actually read the title of this post, you have an idea of what it is: this.$nextTick. This function lets you provide a callback to execute when Vue is done propagating your changes to the DOM and it’s safe to assume it reflects your new data. The fix is pretty simple:

this.$nextTick(() => this.$refs.myForm.submit());

Enter fullscreen mode Exit fullscreen mode

And if fat arrow functions still confuse you a bit (nothing wrong with that!), here’s a simpler version:

this.$nextTick(function() {
    this.$refs.myForm.submit();
});

Enter fullscreen mode Exit fullscreen mode

You can see the corrected version in the CodePen below.

So to answer the question of β€œwhen” - I guess I’d say when you need to ensure the DOM 100% reflects your data and in this case it’s kind of obvious - I needed my form POST to use the correct URL. Out of all the times I’ve used Vue this is the first time I needed this precise level of control but I’m sure I’ll run into more examples. If you can, please share an example of when you’ve used it in the comments below!

Top comments (1)

Collapse
 
akshatbhargava123 profile image
Akshat

Awesome, thanks for sharing.

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await