How to implement a function when a component is created in Vue?

Question

According to the docs, the constructor of the Vue object is managed like this.

var vm = new Vue({
  created: function () { console.log("I'm created!"); }
});

However, I can't figure out how to do the corresponding thing when a Vue component is created. I've tried the following but don't get any print to the console.

export default {
  created: function() { console.log("Component created!"); }
}

Is it possible to subscribe/listen to a component being rendered? I'd like to react to that event by downloading some data and putting it in the store, so that the table that the component carries will get its information to display.

is your export default inside of a .vue file as part of a webpack project? there at some point needs to be a call to make a root vue instance that you import components created in .vue files. — vbranden
– vbranden, Commented Dec 10, 2016 at 9:55
@vbranden To answer your questions - the export is inside a .vue file and I do manage my bundling/running with webpack. The other part, I didn't undertand. Could you explain, please? — Konrad Viltersten
– Konrad Viltersten, Commented Dec 10, 2016 at 9:59
maybe I'm not understanding your problem. You have a root Vue instance and a component that has a console.log inside its created hook. Are you at some point in your project importing that component and using it? if so you should see the console log — vbranden
– vbranden, Commented Dec 10, 2016 at 10:08
@vbranden Yes. I must have done something retarded last night. It seems to perform as I expected it it. You're right... If you repost your comment with link and some short info on the other methods (besides created), I'll be happy to accept it and even grant +1. — Konrad Viltersten
– Konrad Viltersten, Commented Dec 10, 2016 at 10:16

Sankalp Singha · Accepted Answer · 2016-12-12 13:09:48Z

8

In my applications, I tend to use the mounted hook to load up some Ajax data once the component has mounted.

Example code from my app:

Vue.component('book-class', {
    template: '#booking-template',
    props: ['teacherid'],
    data: function () {
        return{
            // few data items returned here..
            message: ''
        }
    },
    methods: {
        // Few methods here..
    },
    computed: {
      // few computed methods here...
    },
    mounted: function () {


        var that = this;
        $.ajax({
            type: 'GET',
            url: '/classinfo/' + this.teacherid,
            success: function (data) {
                console.log(JSON.stringify(data));

            }
        })
    }
});


new Vue({
    el: '#mainapp',
    data: {
        message: 'some message here..'
    }
});

However, I can also use created() hook as well as it is in the lifecycle as well.

In Vue2 you have the following lifecycle hooks:

answered Dec 12, 2016 at 13:09

Sankalp Singha

4,5766 gold badges42 silver badges61 bronze badges

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

1 Comment

Konrad Viltersten Over a year ago

That's only applicable upon creation/hookation of the Vue main component. I'm looking for a way to do stuff when a component (any component, part of or child to) is created/imported. Still +1 for the effort with the code. Also, I'd remove the image and just link to it. It's awesomely helpful but ouch so looong.

tony19 · Accepted Answer · 2022-07-15 01:05:22Z

1

components doesn't have life cycle hooks like app. but they has something similar. that fixed my problem: https://v2.vuejs.org/v2/api/#updated

edited Jul 15, 2022 at 1:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 15, 2019 at 8:29

Milan MiNo Michalec

1551 silver badge7 bronze badges

2 Comments

Konrad Viltersten Over a year ago

Ahem... What would you say about the picture above that shows life cycle of an component? AM I missing something here?

Milan MiNo Michalec Over a year ago

@KonradViltersten picture above is lifecycle of app not lifecycle of component. Comenents doesn't have those hooks...

Collectives™ on Stack Overflow

How to implement a function when a component is created in Vue?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related