This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
Life cycle hooks are windows to the driving factors of our frameworks. They help us keep track of what happens to our components. Typically, this is when they are created, updated, destroyed or before either happens.
Vue Mounted lifecycle hook is a function called after the instance is mounted. It is however worthy of note that, mounted does not guarantee that all child components have also been mounted. To ensure that the entire view has been rendered, we can use vm.$nextTick inside of mounted .
<script>
export default {
data() {
return {
message: "Shows a fully mounted demo message",
};
},
mounted() {
this.$nextTick(function () {
this.displayMessage();
});
},
methods: {
displayMessage() {
console.log(this.message);
},
}
};
</script>Basically, the method displayMessage is called when the component is mounted. this.$nextTick ensures that all child components are as well loaded before calling the function.
The post Using the Vue mounted lifecycle hook appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
Prince Chukwudire | Sciencx (2021-02-17T16:28:52+00:00) Using the Vue mounted lifecycle hook. Retrieved from https://www.scien.cx/2021/02/17/using-the-vue-mounted-lifecycle-hook/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.