Como chamar uma função vue.js no carregamento da página

Tenho uma função que ajuda a filtrar dados. Estou usando v-on:changequando um usuário altera a seleção, mas também preciso que a função seja chamada antes mesmo de o usuário selecionar os dados. Eu fiz o mesmo com o AngularJSuso anterior, ng-initmas entendo que não existe tal diretiva emvue.js

Esta é minha função:

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)
        });
    }

No bladearquivo utilizo formulários blade para realizar os 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>

Isso funciona bem quando eu seleciono um item específico. Então, se eu clicar em todos all floors, digamos , funciona. O que eu preciso é que quando a página for carregada, ele chame o getUnitsmétodo que fará o $http.postcom a entrada vazia. No back-end, lidei com a solicitação de forma que, se a entrada estiver vazia, ela fornecerá todos os dados.

Como posso fazer isso vuejs2?

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

Você pode chamar esta função na seção beforeMount de um componente Vue: como a seguir:

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

Trabalhando violino: https://jsfiddle.net/q83bnLrx/1/

Existem diferentes ganchos de ciclo de vida que a Vue fornece:

Eu listei alguns são:

1. beforeCreate : Chamado de forma síncrona após a instância ter sido inicializada, antes da observação de dados e configuração do evento / observador.
2. criado : chamado de forma síncrona após a criação da instância. Neste estágio, a instância terminou de processar as opções, o que significa que o seguinte foi configurado: observação de dados, propriedades computadas, métodos, callbacks de observação / evento. No entanto, a fase de montagem não foi iniciada e a propriedade $ el ainda não estará disponível.
3. beforeMount : Chamado logo antes do início da montagem: a função render está prestes a ser chamada pela primeira vez.
4. montado : Chamado depois que a instância acaba de ser montada, onde el é substituído pelo recém-criado vm.$el.
5. beforeUpdate : Chamado quando os dados mudam, antes que o DOM virtual seja renderizado novamente e corrigido.
6. atualizado : Chamado depois que uma alteração de dados faz com que o DOM virtual seja renderizado novamente e corrigido.

Você pode dar uma olhada na lista completa aqui .

Você pode escolher qual gancho é mais adequado para você e conectá-lo para chamar sua função como o código de exemplo fornecido acima.

Você precisa fazer algo assim (se quiser chamar o método no carregamento da página):

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

você também pode fazer isso usando mounted

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

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

Esteja ciente de que quando o mountedevento é disparado em um componente, nem todos os componentes do Vue são substituídos ainda, então o DOM pode não ser final ainda.

Para realmente simular o onloadevento DOM , ou seja, para disparar depois que o DOM estiver pronto, mas antes que a página seja desenhada, use vm. $ NextTick de dentro mounted:

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

Se você obtiver dados no array, pode fazer o seguinte. Funcionou para mim

    <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>