在load vue.js上运行组件方法

Question

嘿，我对Vue.js很陌生，我正在努力完成一件似乎很简单的事，但我遇到了麻烦。从本质上讲，我需要它，所以每次将一个组件加载到DOM中时，其中一个方法就会触发。这是我当前的代码，我尝试使用v-on：load但它似乎不起作用。

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

    }

});

如果我使用v-on：click事件

，相同的代码功能正常

Answer 1

您可以使用instance lifecycle hooks。例如：

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

Answer 2

您必须按以下方式调用以“ this”为前缀的函数：

var data =
{
   cashiers: []
}

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

});