Vue: this.$el not instantly available when created() is called

[clementprdhomme]

Hi all!

I'm currently writing an SPA with Vue and I'm running through an issue. I read carefully the documentation and I don't think I made any error.

What I want to do is to call a function once a component has been rendered and appended to the DOM. For that, I create a method created which calls a method init within the methods object. The issue is that at that point, I'm unable to access this.$el (it's undefined). Nevertheless, if I use setTimeout with a delay of 0, this.$el gets the DOM element.

Has anyone experienced this issue? Is there something wrong in the flow? I attached a example below.

Thanks!

Clément

Vue.js version

1.0.17

Reproduction Link

Example of the issue

Steps to reproduce

Just launch the JSBin and take a look at the console.

What is Expected?

The first log should be the same as the second.

What is actually happening?

The first log returns undefined.

[simplesmiler]

By the time created hook is called, DOM compilation has not been started.
What you need is either compiled (element exists, but is not in the DOM yet) or ready (element was inserted into the DOM).

[clementprdhomme]

OMG you're right. I thought created was in fact ready.

Thank you so much! I'm closing the issue.