Vue 'mounted' Lifecycle Hook


Example

Using the mounted lifecycle hook to put the cursor inside the input field as soon as the component is mounted.

<script>
export default {
	mounted() {
		this.$refs.inpName.focus();
	}
}
</script>
Run Example »

Definition and Usage

The mounted lifecycle hook happens after the Vue component is mounted to the DOM tree.

Because the component is mounted, we can access the properties that belong to the component instance such as data or computed, and we can access the component's DOM elements because they have just been mounted to the DOM.


Related Pages

Vue Tutorial: Vue Lifecycle Hooks

Vue Tutorial: The 'mounted' Hook

Vue Reference: Vue 'beforeMount' Lifecycle Hook


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.