web-dev-qa-db-fra.com

Comment appeler une fonction vue.js au chargement de la page

J'ai une fonction qui aide à filtrer les données. J'utilise v-on:change lorsqu'un utilisateur modifie la sélection, mais j'ai également besoin que la fonction soit appelée avant même que l'utilisateur ne sélectionne les données. J'ai déjà fait la même chose avec AngularJS auparavant en utilisant ng-init mais je comprends qu'il n'y a pas de directive de ce type dans vue.js

Ceci 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 fichier blade, j'utilise des formes de 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 lorsque je sélectionne un élément spécifique. Ensuite, si je clique sur tous, disons all floors, cela fonctionne. Ce dont j'ai besoin, c'est quand la page est chargée, elle appelle la méthode getUnits qui exécutera le $http.post avec une entrée vide. Dans le backend, j'ai traité la demande de manière à ce que si l'entrée est vide, toutes les données seront données.

Comment puis-je faire cela dans vuejs2?

Mon code: http://jsfiddle.net/q83bnLrx

javascriptvue.jsvuejs2
67
Phillis Peters

Vous pouvez appeler cette fonction dans la section beforeMount d'un composant Vue: comme suit:

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

Le violon en marche: https://jsfiddle.net/q83bnLrx/1/

Il existe différents crochets de cycle de vie Vue fournissant:

J'ai énuméré quelques-uns sont:

  1. beforeCreate : Appelé de manière synchrone après l'initialisation de l'instance, avant l'observation des données et la configuration de l'événement/de l'observateur.
  2. créé : Appelé de manière synchrone après la création de l'instance. A ce stade, l'instance a fini de traiter les options, ce qui signifie que les options suivantes ont été configurées: observation de données, propriétés calculées, méthodes, rappels d'observation/d'événement. Cependant, la phase de montage n'a pas encore commencé et la propriété $ el ne sera pas encore disponible.
  3. beforeMount : Appelé juste avant le début du montage: la fonction de rendu est sur le point d'être appelée pour la première fois.
  4. monté : Appelé après le montage de l'instance, où el est remplacé par le vm.$el nouvellement créé.
  5. beforeUpdate : Appelé lorsque les données sont modifiées, avant que le DOM virtuel ne soit restitué et mis à jour.
  6. pdated : appelé après une modification de données, le DOM virtuel est restitué et corrigé.

Vous pouvez consulter la liste complète ici .

Vous pouvez choisir le hook qui vous convient le mieux et le raccrocher pour vous appeler, comme dans l'exemple de code fourni ci-dessus.

141
Saurabh

Vous devez faire quelque chose comme ceci (si vous voulez appeler la méthode au chargement de la page):

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

vous pouvez aussi le faire en utilisant mounted

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

....
methods:{
    getUnits: function() {...}
},
mounted: function(){
    this.$nextTick(this.getUnits)
}
....
2
Bernard 'Beta Berlin' Parah

Notez que lorsque l'événement mounted est déclenché sur un composant, tous les composants Vue ne sont pas encore remplacés. Le DOM peut donc ne pas être encore définitif.

Pour vraiment simuler l’événement DOM onload, c’est-à-dire s’il doit être déclenché une fois que le DOM est prêt mais avant que la page ne soit dessinée, utilisez vm. $ NextTick de l'intérieur mounted :

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