Cómo llamar a un SDV.función js en carga de página

Tengo una función que ayuda a filtrar datos. Estoy usando v-on:change cuando 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 AngularJS anteriormente usando ng-init pero entiendo que no hay tal directiva en vue.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 archivo blade uso formularios blade 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 digamos all floors, funciona. Lo que necesito es que cuando la página se cargue, llame al método getUnits que realizará el $http.post con entrada 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 en vuejs2?

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

Author: Phillis Peters, 2016-11-21
Source

2 answers

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 hooks de ciclo de vida que Vue proporciona:

He enumerado algunos son:

  1. beforeCreate: Se llama sincrónicamente después de que la instancia acaba de inicializarse, antes de la observación de datos y la configuración de event/watcher.
  2. creado : Llamado sincrónicamente después se crea la instancia. En esta etapa, la instancia ha terminado de procesar las opciones, lo que significa que se han configurado las siguientes opciones: observación de datos, propiedades calculadas, métodos, devoluciones de llamada de observación/evento. Sin embargo, la fase de montaje no se ha iniciado, y la propiedad $el no estará disponible todavía.
  3. beforeMount: Llamada justo antes de que comience el montaje: la función render está a punto de ser llamada por primera vez.
  4. montado : Llamado después de la la instancia acaba de ser montada donde el es reemplazado por el recién creado vm.$el.
  5. BeforeUpdate: Se llama cuando los datos cambian, antes de que el DOM virtual sea re-renderizado y parcheado.
  6. actualizado: Llamado después de un cambio de datos hace que el DOM virtual sea re-renderizado y parcheado.

Puedes echar un vistazo a la lista completa aquí.

Puede elegir qué gancho es el más adecuado para usted y engancharlo para llamar a su función como la muestra código proporcionado anteriormente.

 85
Author: Saurabh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-21 16:54:23

Necesitas hacer algo como esto (Si quieres llamar al método al cargar la página): 

new Vue({
    // ...
    methods:{
        getUnits: function() {...}
    },
    created: function(){
        this.getUnits()
    }
});
 17
Author: The Alpha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-21 07:02:42