Comment appeler une fonction vue.js lors du chargement de la page

97

J'ai une fonction qui aide à filtrer les données. J'utilise v-on:changelorsqu'un utilisateur modifie la sélection, mais j'ai également besoin que la fonction soit appelée avant même que l'utilisateur sélectionne les données. J'ai fait la même chose avec AngularJSl'utilisation précédente, ng-initmais je comprends qu'il n'y a pas une telle directive dansvue.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 bladefichier, j'utilise des formulaires 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 tout all floors, disons , cela fonctionne. Ce dont j'ai besoin, c'est lorsque la page est chargée, elle appelle la getUnitsméthode qui effectuera le $http.postavec une entrée vide. Dans le backend, j'ai traité la demande de manière à ce que si l'entrée est vide, elle donnera toutes les données.

Comment puis-je faire cela vuejs2?

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

Phillis Peters
la source

Réponses:

195

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

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

Violon de travail: https://jsfiddle.net/q83bnLrx/1/

Il existe différents hooks de cycle de vie fournis par Vue:

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

  1. beforeCreate : Appelé de manière synchrone après que l'instance vient d'être initialisée, avant l'observation des données et la configuration des événements / observateurs.
  2. created : Appelé de manière synchrone après la création de l'instance. À ce stade, l'instance a fini de traiter les options, ce qui signifie que les éléments suivants ont été configurés: observation des données, propriétés calculées, méthodes, rappels de veille / événement. Cependant, la phase de montage n'a pas été lancée 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 que l'instance vient d'être montée où el est remplacé par le nouvellement créé vm.$el.
  5. beforeUpdate : appelé lorsque les données changent, avant que le DOM virtuel ne soit rendu et corrigé.
  6. mis à jour : appelé après un changement de données, le DOM virtuel est à nouveau rendu et corrigé.

Vous pouvez consulter la liste complète ici .

Vous pouvez choisir le hook qui vous convient le mieux et le raccorder pour appeler votre fonction comme l'exemple de code fourni ci-dessus.

Saurabh
la source
@PhillisPeters pouvez vous mettre plus de code, ou en créer un violon.
Saurabh
@PhillisPeters Veuillez jeter un œil à la mise à jour du violon , j'ai remplacé http post call par setTimeout pour la simulation, vous pouvez maintenant voir les données en cours de remplissage dans le tableau.
Saurabh
@GeorgeAbitbol N'hésitez pas à mettre à jour la réponse en conséquence.
Saurabh
Mon problème était que je ne savais pas utiliser "this" dans la section monté (), et j'obtenais des erreurs de fonction non définies. «Ceci» est utilisé ci-dessus, et j'ai remarqué que c'était la solution à mon problème, mais ce n'est pas mis en évidence dans la réponse. Le problème du PO était-il similaire au mien? L'ajout d'un appel pour résoudre les problèmes de liaison améliorerait-il cette réponse?
mgrollins
31

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

new Vue({
    // ...
    methods:{
        getUnits: function() {...}
    },
    created: function(){
        this.getUnits()
    }
});
L'Alpha
la source
1
Essayez createdplutôt.
The Alpha
1
@PhillisPeters Vous pouvez utiliser created ou beforeMount.
Saurabh
3

Sachez que lorsque l' mountedévénement 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' onloadévénement DOM , c'est-à-dire pour se déclencher 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
  })
}
rustyx
la source
0

Si vous obtenez des données dans un tableau, vous pouvez faire comme ci-dessous. Ça a marché pour moi

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