So rufen Sie eine vue.js-Funktion beim Laden der Seite auf

Ich habe eine Funktion, die beim Filtern von Daten hilft. Ich verwende, v-on:changewenn ein Benutzer die Auswahl ändert, aber ich muss auch die Funktion aufrufen, bevor der Benutzer die Daten auswählt. Ich habe das gleiche mit der AngularJSvorherigen Verwendung gemacht, ng-initaber ich verstehe, dass es keine solche Richtlinie gibtvue.js

Das ist meine Funktion:

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

In der bladeDatei verwende ich Blade-Formulare, um die Filter auszuführen:

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

Dies funktioniert gut, wenn ich ein bestimmtes Element auswähle. Wenn ich dann auf alle klicke all floors, funktioniert es. Was ich brauche ist, wenn die Seite geladen wird, ruft sie die getUnitsMethode auf, die die $http.postmit leerer Eingabe ausführt . Im Backend habe ich die Anfrage so behandelt, dass bei leerer Eingabe alle Daten angezeigt werden.

Wie kann ich das machen vuejs2?

Mein Code: http://jsfiddle.net/q83bnLrx

Sie können diese Funktion im Abschnitt beforeMount einer Vue-Komponente aufrufen : wie folgt:

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

Arbeitsgeige: https://jsfiddle.net/q83bnLrx/1/

Es gibt verschiedene Lifecycle-Hooks, die Vue bietet:

Ich habe nur wenige aufgeführt:

1. beforeCreate : Wird synchron aufgerufen, nachdem die Instanz gerade initialisiert wurde, bevor Daten beobachtet und Ereignisse / Beobachter eingerichtet wurden.
2. Erstellt : Wird nach dem Erstellen der Instanz synchron aufgerufen. Zu diesem Zeitpunkt hat die Instanz die Verarbeitung der Optionen abgeschlossen, was bedeutet, dass Folgendes eingerichtet wurde: Datenbeobachtung, berechnete Eigenschaften, Methoden, Watch / Event-Rückrufe. Die Bereitstellungsphase wurde jedoch noch nicht gestartet, und die Eigenschaft $ el ist noch nicht verfügbar.
3. beforeMount : Wird direkt vor Beginn der Montage aufgerufen: Die Renderfunktion wird zum ersten Mal aufgerufen.
4. gemountet : Wird aufgerufen, nachdem die Instanz gerade gemountet wurde, wobei el durch die neu erstellte ersetzt wird vm.$el.
5. beforeUpdate : Wird aufgerufen, wenn sich die Daten ändern, bevor das virtuelle DOM erneut gerendert und gepatcht wird.
6. aktualisiert : Wird nach einer Datenänderung aufgerufen, wird das virtuelle DOM neu gerendert und gepatcht.

Die vollständige Liste finden Sie hier .

Sie können auswählen, welcher Hook für Sie am besten geeignet ist, und ihn einhaken, um Ihre Funktion wie den oben angegebenen Beispielcode aufzurufen.

Sie müssen Folgendes tun (wenn Sie die Methode beim Laden der Seite aufrufen möchten):

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

Sie können dies auch mit tun mounted

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

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

Beachten Sie, dass beim Auslösen des mountedEreignisses für eine Komponente noch nicht alle Vue-Komponenten ersetzt wurden, sodass das DOM möglicherweise noch nicht endgültig ist.

Um das DOM- onloadEreignis wirklich zu simulieren , dh um zu feuern, nachdem das DOM fertig ist, aber bevor die Seite gezeichnet wird, verwenden Sie vm. $ NextTick von innen mounted:

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

Wenn Sie Daten im Array erhalten, können Sie wie folgt vorgehen. Es hat bei mir funktioniert

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