Comment appeler une vue.fonction js sur le chargement de la page
j'ai une fonction qui aide à filtrer les données. Je suis à l'aide de v-on:change quand un utilisateur change la sélection mais j'ai aussi besoin que la fonction soit appelée avant même que l'utilisateur ne sélectionne les données. J'ai fait la même chose avec AngularJS précédemment à l'aide de ng-init mais je comprends qu'il n'existe pas une telle directive vue.js
C'est ma fonction:
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)
});
}
Dans le blade fichier-je utiliser les formes de la lame pour effectuer les filtres:
<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>
cela fonctionne bien quand je sélectionnez un élément spécifique. Alors si je clique sur tout, disons all floors, ça fonctionne. Ce dont j'ai besoin, c'est quand la page est chargée, elle appelle le getUnits méthode qui effectuera le $http.post avec entrée vide. Dans le backend, j'ai traité la demande que si l'entrée est vide, il vous donnera toutes les données.
Comment puis-je faire dans <!--10?
Mon Code:http://jsfiddle.net/q83bnLrx
2 réponses
Vous pouvez appeler cette fonction en beforeMount section d'une composante Vue: comme suit:
....
methods:{
getUnits: function() {...}
},
beforeMount(){
this.getUnits()
},
......
violon de travail:https://jsfiddle.net/q83bnLrx/1/
Il y a différentes du cycle de vie des crochets en Vue de fournir:
j'ai énuméré quelques-uns sont :
- beforeCreate: appelé de façon synchrone après que l'instance vient d'être initialisée, avant l'observation des données et l'observateur d'événement/observateur configuration.
- créer: appelé de façon synchrone après la création de l'instance. À ce stade, l'instance a terminé le traitement des options, ce qui signifie que les éléments suivants ont été mis en place: l'observation des données, les propriétés calculées, les méthodes, les callbacks watch/event. Toutefois, la phase de montage n'a pas encore commencé et la propriété $el ne sera pas encore disponible.
- beforeMount: appelé juste avant le début du montage: la fonction de rendu est d'environ à être appelé pour la première fois.
- monté: appelé après que l'instance vient d'être montée où el est remplacé par le nouveau
vm.$el. - beforeUpdate: appelé lorsque les données changent, avant que le DOM virtuel soit rendu et corrigé.
- mise à jour: appelé après un changement de données provoque le DOM virtuel à être re-rendu et corrigé.
Vous pouvez jeter un oeil à la liste complète ici.
vous pouvez choisir quel crochet vous convient le mieux et l'accrocher pour vous appeler fonction comme le code échantillon fourni ci-dessus.
Vous devez faire quelque chose comme ceci (si vous voulez appeler la méthode sur le chargement de la page):
new Vue({
// ...
methods:{
getUnits: function() {...}
},
created: function(){
this.getUnits()
}
});