Using the Vue.nextTick function

In this article, you will learn about the Vue.nextTick callback function and when to make use of it.

In plain terms, Vue.nextTick gives you access to the data instance after it has been updated, the new changes effected on the DOM but not yet rendered on the web page.

We can visualize its role by updating our data instance during the mounted life cycle hook and catching its effect midway.

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
    data() {
    return {
      msg: "First Message",
    };
  },
  mounted() {
    this.msg = "Second message";
  },
};
</script>

This would update our instance and render the new message. Let’s add the Vue.nextTick function, refresh our page and observe the change.

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "First Message",
    };
  },
  mounted() {
    this.msg = "Second message";

    this.$nextTick(() => {
      this.msg = "Third message";
    });
  },
};
</script>

  

When we reload the page we see the third message rendered.