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

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

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.

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

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)
}
....

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

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>