web-dev-qa-db-fra.com

Exécuter la méthode du composant sur load vue.js

hé, je suis assez nouveau dans Vue.js et j'essaie d'accomplir ce qui semble être une chose simple, mais j'ai des problèmes J'en ai essentiellement besoin pour que chaque fois qu'un composant est chargé dans le DOM, une de ses méthodes se déclenche. Voici mon code actuel, j'ai essayé d'utiliser v-on: load mais cela ne semble pas fonctionner.

Vue.component('graph', {
    props:['graphId','graphData'],
    template: '<canvas v-on:load="{{populateGraph()}}"></canvas>',
    methods: {
        initGraph: function () {
            var settlementBalanceBarChart = new Chart(this.graphId, {
                type: "bar",
                data: settlementBalanceBarData,
                options: settlementBalanceBarOptions
            });
        },
        //this is the function I would like to run
        populateGraph: function () {
            alert('{{graphId}}');
        }
    }

});

var vm = new Vue({
    el: "#app",
    mounted: function(){

    }

});

Le même code fonctionne bien si j'utilise l'événement v-on: click

javascriptvue.jsvue-component
16
Zak A

Il y a des exemples de cycles de vie que vous pouvez utiliser pour cela. Par exemple:

Vue.component('graph', {
    props:['graphId','graphData'],
    template: '<canvas></canvas>',
    created: function () {
        alert('{{graphId}}');
    },
    methods: {}
});
21
str

Vous devez appeler la fonction précédée de "this" comme suit:

var data =
{
   cashiers: []
}

var vm = new Vue({
    el: '#app',
    data: data,
    created: function () {
       this.getCashiers();
    },
    methods: {
         getCashiers: function () {
          vm.cashiers = [];
         }
    }

});
0
Mohammed Osman