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

93

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

Phillis Peters
quelle

Antworten:

189

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.

Saurabh
quelle
@PhillisPeters können Sie mehr Code einfügen oder eine Geige daraus erstellen.
Saurabh
@PhillisPeters Bitte werfen Sie einen Blick auf die aktualisierte Geige . Ich habe http post call durch setTimeout für die Simulation ersetzt. Jetzt können Sie sehen, dass Daten in der Tabelle ausgefüllt werden.
Saurabh
@GeorgeAbitbol Bitte zögern Sie nicht, die Antwort entsprechend zu aktualisieren.
Saurabh
Mein Problem war, dass ich nicht wusste, dass ich "this" im Abschnitt "mount ()" verwenden sollte, und dass ich undefinierte Funktionsfehler bekam. "Dies" wird oben verwendet, und ich habe festgestellt, dass dies die Lösung für mein Problem ist, aber es wird in der Antwort nicht hervorgehoben. War das Problem des OP meinem ähnlich? Würde das Hinzufügen eines Aufrufs zur Behebung verbindlicher Probleme diese Antwort verbessern?
Mollins
31

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()
    }
});
Das Alpha
quelle
1
Versuchen Sie es createdstattdessen.
Die Alpha
1
@PhillisPeters Sie können created oder beforeMount verwenden.
Saurabh
3

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
  })
}
Rustyx
quelle
0

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>
Subash Sapkota
quelle