Run component method on vue.js download

Question

Hey, I'm pretty new to Vue.js, and I'm trying to accomplish something that seems simple, but I'm having problems. In fact, I need this, so every time a component is loaded into the DOM, one of its methods fires. Here is my current code, I tried to use v-on: load, but it does not 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 are fine if I use the v-on: click event

Answer 1

There are instance lifecycle hooks you can use to do this. For instance:

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