How to check if the App is mounted completely with all its children components

I want to get the Document height when the App is mounted , so I use something like this in the App.vue:

mounted() {
let height = this.$refs.app.clientHeight; // Result is 1000px
},

I get a wrong height because it seems that it takes the height somehow earlier and before all child re n components get mounted.

So I took the height after 300ms , and got it worked, the height is correct

 mounted() {
let height = this.$refs.app.clientHeight;
setTimeout(() => {
  console.log(this.$refs.app.scrollHeight); // Result is 3000px
}, 3000);

},

so I need a way to get the height correctly or check when the full App with all the rendered components will get mounted…

Thanks

The first step you just use computed to get the clientHeight and use watcher to set a new component height whenever clientHeight changed

That’s not going to work because you can’t watch a DOM element for property changes.

@saifobeidat Have a look at ResizeObserver.

1 Like

Oh sorry that is my mistake…that is a correct way first you need to attach a listener first like what @JamesThomson said and don’t forget to remove the listener whenever a component destroy

can let the child component dispatch an event to the parent component every time it is mounted, and let the parent component use a counter to count the number of mounted child components after receiving the event, thereby determining whether all the child components are mounted complete.

Vue will stop listening on destroy to events so I am told…