I'm aware of mounted
and created
being life cycle hooks and have tried them. I've also tried using $nextTick
within mounted and that does not work to get an accurate render either. I am currently trying to access some data out of a dom node after the initial render. Here's the pertinent part of my code:
mounted() {
console.log(this.$el.getBoundingClientRect().top);
},
This is giving me incorrect data. However, using this code:
mounted() {
setTimeout(() => {
console.log(this.$el.getBoundingClientRect().top);
}, 1000)
},
Does net me the correct data. The threshold is about ~700-900 ms before I start getting the correct data.
Question 1
Why is the lifecycle invoke when everything hasn't fully rendered?
Question 2
Does it have to do with sibling components that haven't quite mounted yet that might be pushing dimensions?
Question 3
Is there a solution, an event that I can hook into that basically says, 'everything on the page has rendered'.
I don't love the setTimeout
solution that I came up with for obvious reasons.