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

Tengo una función que ayuda a filtrar datos. Estoy usando v-on:changecuando un usuario cambia la selección, pero también necesito que se llame a la función incluso antes de que el usuario seleccione los datos. He hecho lo mismo con el AngularJSuso anterior, ng-initpero entiendo que no existe tal directiva envue.js

Esta es mi función:

getUnits: function () {
        var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};

        this.$http.post('/admin/units', input).then(function (response) {
            console.log(response.data);
            this.units = response.data;
        }, function (response) {
            console.log(response)
        });
    }

En el bladearchivo utilizo formularios de hoja para realizar los filtros:

<div class="large-2 columns">
        {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
    </div>
    <div class="large-3 columns">
        {!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!}
    </div>

Esto funciona bien cuando selecciono un elemento específico. Entonces, si hago clic en todos all floors, digamos , funciona. Lo que necesito es cuando se carga la página, llama al getUnitsmétodo que realizará la $http.postentrada vacía. En el backend, he manejado la solicitud de una manera que si la entrada está vacía, dará todos los datos.

¿Cómo puedo hacer esto vuejs2?

Mi código: http://jsfiddle.net/q83bnLrx

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

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

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

Hay diferentes enlaces de ciclo de vida que proporciona Vue:

He enumerado algunos son:

1. beforeCreate : se llama sincrónicamente después de que la instancia se acaba de inicializar, 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 se acaba de montar la instancia 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 el más adecuado para usted y conectarlo 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)
}
....

Tenga en cuenta que cuando el mountedevento se activa en un componente, no todos los componentes de Vue se reemplazan todavía, por lo que es posible que el DOM aún no sea definitivo.

Para simular realmente el onloadevento DOM , es decir, para disparar después de que DOM esté listo pero antes de que se dibuje la página, use vm. $ NextTick desde adentro mounted:

mounted: function () {
  this.$nextTick(function () {
    // Will be executed when the DOM is ready
  })
}

Si obtiene datos en una matriz, puede hacer lo siguiente. Ha funcionado para mi

    <template>
    {{ id }}
    </template>
    <script>

    import axios from "axios";

        export default {
            name: 'HelloWorld',
            data () {
                return {
                    id: "",

                }
            },
    mounted() {
                axios({ method: "GET", "url": "https://localhost:42/api/getdata" }).then(result => {
                    console.log(result.data[0].LoginId);
                    this.id = result.data[0].LoginId;
                }, error => {
                    console.error(error);
                });
            },
</script>