This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
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.
The post Using the Vue.nextTick function appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
Prince Chukwudire | Sciencx (2021-03-04T08:02:39+00:00) Using the Vue.nextTick function. Retrieved from https://www.scien.cx/2021/03/04/using-the-vue-nexttick-function/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.