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

Question

J'ai une fonction qui permet de filtrer les données. J'utilise v-on:change lorsque l'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 fait la même chose avec AngularJS en utilisant précédemment ng-init mais je comprends qu'il n'y a pas une telle directive dans 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 J'utilise des formulaires en forme 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, disons all floors cela fonctionne. Ce dont j'ai besoin, c'est que lorsque la page est chargée, elle appelle la fonction getUnits qui exécutera la méthode $http.post avec une entrée vide. Dans le backend, j'ai traité la requête de manière à ce que si l'entrée est vide, toutes les données soient données.

Comment puis-je faire cela dans vuejs2 ?

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

Answer 1

Vous pouvez appeler cette fonction dans avant le montage d'un composant Vue : comme suit :

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

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

Il existe différents crochets de cycle de vie que Vue fournit :

J'en ai listé 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 de l'événement/watcher.
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 éléments suivants ont été mis en place : observation des données, propriétés calculées, méthodes, callbacks watch/event. Cependant, la phase de montage n'a pas été lancée, et la propriété $el ne sera pas encore disponible.
3. avant le montage : 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ée par la nouvelle instance créée vm.$el .
5. beforeUpdate : Appelé lorsque les données changent, avant que le DOM virtuel ne soit rendu à nouveau et corrigé.
6. actualisé : Appelé après qu'un changement de données entraîne un nouveau rendu du DOM virtuel et un correctif.

Vous pouvez consulter la liste complète ici .

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

Answer 2

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()
    }
});

Answer 3

Vous pouvez également le faire en utilisant mounted

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

....
methods:{
    getUnits: function() {...}
},
mounted: function(){
    this.$nextTick(this.getUnits)
}
....

Answer 4

Attention, lorsque le mounted est déclenché sur un composant, tous les composants Vue ne sont pas encore remplacés, donc le DOM peut ne pas être encore définitif.

Pour vraiment simuler le DOM onload pour déclencher l'événement après que le DOM soit prêt mais avant que la page ne soit affichée, utilisez l'événement vm.$nextTick de l'intérieur mounted :

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

Answer 5

Si vous obtenez des données dans un tableau, vous pouvez faire comme ci-dessous. Cela a fonctionné 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>