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

tony19 · Accepted Answer · 2022-07-15 19:49:47Z

32

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: {}
});

edited Jul 15, 2022 at 19:49

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 18, 2016 at 12:14

str

45.5k18 gold badges117 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aria Over a year ago

does created() run one time after render completed?

Mohammed Osman · Accepted Answer · 2018-11-19 21:43:24Z

5

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 = [];
         }
    }

});

answered Nov 19, 2018 at 21:43

Mohammed Osman

4,2763 gold badges33 silver badges30 bronze badges

3 Comments

Ben Over a year ago

Any reason why you write the getCashiers function in the methods declaration and not in the created declaration?

Mohammed Osman Over a year ago

"methods declarations" is the right place for writing the methods. "created declarations" is the place where you can call methods after the component is completely created.

lucasreta Over a year ago

@kaleidawave Even though in this case it may seem useless, creating it inside methods is a good practice, useful for example when you need to call that same method on creation and on other events.

Collectives™ on Stack Overflow

Run component method on load vue.js

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related