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


97

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

Respuestas:


195

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.


@PhillisPeters puede poner más código o crear un violín de él.
Saurabh

@PhillisPeters Por favor, eche un vistazo al violín actualizado , reemplacé la llamada de publicación http con setTimeout para la simulación, ahora puede ver los datos que se completan en la tabla.
Saurabh

@GeorgeAbitbol No dude en actualizar la respuesta en consecuencia.
Saurabh

Mi problema era que no sabía usar "esto" en la sección montada (), y estaba obteniendo errores de función indefinidos. "Esto" se usa arriba, y entendí que esta era la solución a mi problema, pero no está resaltado en la respuesta. ¿El problema del OP era similar al mío? ¿La adición de una llamada para abordar los problemas vinculantes mejoraría esta respuesta?
mgrollins

31

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

1
Intente en su createdlugar.
The Alpha

1
@PhillisPeters Puede usar created o beforeMount.
Saurabh


3

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

0

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.