Cómo llamar a una función vue.js al cargar la página

Solución:

Puede llamar a esta función en la sección beforeMount de un componente de Vue: como sigue:

 ....
 methods:{
     getUnits: function() {...}
 },
 beforeMount(){
    this.getUnits()
 },
 ......

Violín de trabajo: https://jsfiddle.net/q83bnLrx/1/

Hay diferentes ganchos de ciclo de vida que proporciona Vue:

He enumerado algunos son:

1. beforeCreate: se llama sincrónicamente después de que se acaba de inicializar la instancia, antes de la observación de datos y la configuración del evento / observador.
2. created: se llama sincrónicamente después de que se crea la instancia. En esta etapa, la instancia ha terminado de procesar las opciones, lo que significa que se ha configurado lo siguiente: observación de datos, propiedades calculadas, métodos, devoluciones de llamada de reloj / evento. Sin embargo, la fase de montaje no se ha iniciado y la propiedad $ el aún no estará disponible.
3. beforeMount: llamado justo antes de que comience el montaje: la función de render está a punto de ser llamada por primera vez.
4. montado: se llama después de que la instancia acaba de ser montada donde el se reemplaza por el recién creado vm.$el.
5. beforeUpdate: se llama cuando los datos cambian, antes de que el DOM virtual se vuelva a renderizar y parchear.
6. actualizado: se llama después de que un cambio de datos hace que el DOM virtual se vuelva a renderizar y parchear.

Puedes echar un vistazo a la lista completa aquí.

Puede elegir qué gancho es más adecuado para usted y engancharlo para que funcione como el código de muestra proporcionado anteriormente.

Debe hacer algo como esto (si desea llamar al método al cargar la página):

new Vue({
    // ...
    methods:{
        getUnits: function() {...}
    },
    created: function(){
        this.getUnits()
    }
});

también puedes hacer esto usando mounted

https://vuejs.org/v2/guide/migration.html#ready-replaced

....
methods:{
    getUnits: function() {...}
},
mounted: function(){
    this.$nextTick(this.getUnits)
}
....

---

---

Utiliza Nuestro Buscador