When Vue Component mounted hook called, have all the DOMs inside already been rendered?

0
votes

UPDATE: I forget to remove v-if in that div level which prevents the underlying element from getting rendered

Quick question, in Vue, if I have a component like:

<uploader></uploader>

inside its template:

<div><input type="file" ref="upldr" /></div>

I wonder why I can not access that input DOM like:

this.$refs.upldr

It gives me undefined

Does it mean that when the mounted hook gets called, all the DOM elements inside the template have not been rendered?

Thanks,

1
vue.js
All of the DOM elements inside a component's template have been rendered at the point when mounted is called. Here's a simple fiddle using the info you've provided: jsfiddle.net/qp0g1m76 - thanksd
My first thought is that you have the <input/> inside of a v-if that is evaluating to false. In that case, the v-if element and its contents would not be present in the DOM. If that's not the case, you'd need to share an mcve, as there could be a lot of things causing the value to be undefined. - thanksd
@thanksd Thanks, that is exactly what I did stupidly. - Kuan

1 Answers

0
votes

Look at the official Vue documentation for its lifecycle.

According to this, once you reach the mounted hook the DOM will be fully rendered and done. It's the very last hook you can attach to that isn't an event or an exiting function.

So in short: Yes, once you reach mounted everything is ready and good to go, the rest is just related to updating or exiting Vue.

enter image description here