You can call this function in beforeMount section of a Vue component: like following:
....
methods:{
getUnits: function() {...}
},
beforeMount(){
this.getUnits()
},
......
Working fiddle: https://jsfiddle.net/q83bnLrx/1/
There are different lifecycle hooks Vue provide:
I have listed few are :
- beforeCreate: Called synchronously after the instance has just been initialized, before data observation and event/watcher setup.
- created: Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.
- beforeMount: Called right before the mounting begins: the render function is about to be called for the first time.
- mounted: Called after the instance has just been mounted where el is replaced by the newly created
vm.$el
. - beforeUpdate: Called when the data changes, before the virtual DOM is re-rendered and patched.
- updated: Called after a data change causes the virtual DOM to be re-rendered and patched.
You can have a look at complete list here.
You can choose which hook is most suitable to you and hook it to call you function like the sample code provided above.