Run component method on load vue.js

Question

hey I'm pretty new to Vue.js and I'm trying to accomplish what seems to be a simple thing but I'm, having trouble. Essentially, I need it so every time a component is loaded into the DOM, one of it's methods fire. Here is my current code, I've tried to use v-on:load but it doesn't seem to work.

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(){

    }

});

The same code functions fine if I use the v-on:click event

Answer 1

There are instance lifecycle hooks that you can use for that. For example:

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

Answer 2

You have to call the function prefixed by "this" as following:

var data =
{
   cashiers: []
}

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

});