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


99

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

Respostas:


203

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.


@PhillisPeters pode colocar mais código ou criar um violino dele.
Saurabh

@PhillisPeters Por favor, dê uma olhada no fiddle atualizado , substituí a pós-chamada http por setTimeout para simulação, agora você pode ver os dados sendo preenchidos na tabela.
Saurabh

@GeorgeAbitbol Fique à vontade para atualizar a resposta de acordo.
Saurabh de

Meu problema era que eu não sabia usar "this" na seção mounted () e estava recebendo erros de função indefinida. "Isso" é usado acima e percebi que essa era a solução para meu problema, mas não estava destacado na resposta. O problema do OP era semelhante ao meu? Adicionar uma frase de destaque para resolver problemas de ligação tornaria essa resposta melhor?
mgrollins

31

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

1
Em createdvez disso, tente .
The Alpha de

1
@PhillisPeters Você pode usar created ou beforeMount.
Saurabh


4

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

0

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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.