Jak wywołać funkcję vue.js podczas ładowania strony

Mam funkcję, która pomaga filtrować dane. Używam, v-on:changegdy użytkownik zmienia wybór, ale potrzebuję również wywołania funkcji, nawet zanim użytkownik wybierze dane. Zrobiłem to samo z AngularJSwcześniej korzystaniem, ng-initale rozumiem, że nie ma takiej dyrektywy wvue.js

To moja funkcja:

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

W bladepliku używam formularzy blade do wykonania filtrów:

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

Działa to dobrze, gdy wybieram określony element. Jeśli kliknę na wszystko, powiedzmy all floors, że działa. To, czego potrzebuję, to kiedy strona jest ładowana, wywołuje getUnitsmetodę, która wykona $http.postz pustym wejściem. W backendzie obsłużyłem żądanie w taki sposób, że jeśli wejście jest puste, poda wszystkie dane.

Jak mogę to zrobić w vuejs2?

Mój kod: http://jsfiddle.net/q83bnLrx

Możesz wywołać tę funkcję w sekcji beforeMount komponentu Vue: na przykład:

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

Skrzypce robocze: https://jsfiddle.net/q83bnLrx/1/

Vue udostępnia różne haki dotyczące cyklu życia:

Wymieniłem kilka z nich:

1. beforeCreate : wywoływana synchronicznie po zainicjowaniu instancji, przed obserwacją danych i konfiguracją zdarzenia / obserwatora.
2. utworzone : wywoływane synchronicznie po utworzeniu instancji. Na tym etapie instancja zakończyła przetwarzanie opcji, co oznacza, że ​​skonfigurowano: obserwację danych, obliczone właściwości, metody, wywołania zwrotne watch / event. Jednak faza montażu nie została rozpoczęta, a właściwość $ el nie będzie jeszcze dostępna.
3. beforeMount : tuż przed rozpoczęciem montowania: funkcja renderująca zostanie wywołana po raz pierwszy.
4. mount : Wywoływane po zamontowaniu instancji, gdzie el jest zastępowany przez nowo utworzony vm.$el.
5. beforeUpdate : wywoływana, gdy dane ulegną zmianie, zanim wirtualny DOM zostanie ponownie wyrenderowany i poprawiony.
6. aktualizacja : wywoływana po zmianie danych powoduje ponowne renderowanie i łatanie wirtualnego modelu DOM.

Pełną listę możesz zobaczyć tutaj .

Możesz wybrać, który haczyk jest dla Ciebie najbardziej odpowiedni i podłączyć go, aby zadzwonić do Ciebie, działając jak przykładowy kod podany powyżej.

Musisz zrobić coś takiego (jeśli chcesz wywołać metodę podczas ładowania strony):

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

możesz to również zrobić za pomocą mounted

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

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

Uważaj, gdy mountedzdarzenie zostanie uruchomione na komponencie, nie wszystkie komponenty Vue zostaną jeszcze wymienione, więc DOM może nie być jeszcze ostateczny.

Aby naprawdę zasymulować onloadzdarzenie DOM , tj . Uruchomić po tym, jak DOM jest gotowy, ale przed narysowaniem strony, użyj vm. $ NextTick od wewnątrz mounted:

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

Jeśli otrzymasz dane w tablicy, możesz zrobić jak poniżej. U mnie to zadziałało

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