Ich habe eine Funktion, die beim Filtern von Daten hilft. Ich verwende, v-on:change
wenn 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 AngularJS
vorherigen Verwendung gemacht, ng-init
aber 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 blade
Datei 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 getUnits
Methode auf, die die $http.post
mit 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
quelle
Sie müssen Folgendes tun (wenn Sie die Methode beim Laden der Seite aufrufen möchten):
quelle
created
stattdessen.Sie können dies auch mit tun
mounted
https://vuejs.org/v2/guide/migration.html#ready-replaced
quelle
Beachten Sie, dass beim Auslösen des
mounted
Ereignisses für eine Komponente noch nicht alle Vue-Komponenten ersetzt wurden, sodass das DOM möglicherweise noch nicht endgültig ist.Um das DOM-
onload
Ereignis wirklich zu simulieren , dh um zu feuern, nachdem das DOM fertig ist, aber bevor die Seite gezeichnet wird, verwenden Sie vm. $ NextTick von innenmounted
:quelle
Wenn Sie Daten im Array erhalten, können Sie wie folgt vorgehen. Es hat bei mir funktioniert
quelle