I'm trying to get the height of an element. If I try to get it too early, the height is 0px. I tried many different ways to get the height: in mounted(), in created(), on nextTick(), in updated(), and using window.eventListener, but I either get 0px or a size much smaller than I'd expect it to be (~117px). When I run the same command in the console on the page, I get the size I would expect it to be (~278px). If I resize the window, everything works fine. How can I get it to get the right height from the start?
In a vue file, I have:
mounted() {
this.$nextTick(() => {
this.vtextHeight = (document.getElementById(this.item.id).offsetHeight - document.getElementsByClassName("v-card__title")[0].offsetHeight) + 'px';
console.log("next tick", this.vtextHeight);
});
},
updated() {
this.vtextHeight = (document.getElementById(this.item.id).offsetHeight - document.getElementsByClassName("v-card__title")[0].offsetHeight) + 'px';
console.log("updated", this.vtextHeight);
},
created () {
var page = this;
var itemId = this.item.id;
window.addEventListener('load', () => {
page.vtextHeight = (document.getElementById(itemId).offsetHeight - document.getElementsByClassName("v-card__title")[0].offsetHeight) + 'px';
console.log("on load");
});
window.addEventListener('resize', () => {
page.vtextHeight = (document.getElementById(itemId).offsetHeight - document.getElementsByClassName("v-card__title")[0].offsetHeight) + 'px';
console.log("resize", page.vtextHeight);
});
}
On the page load:
- "on load" never gets logged
- "next tick 117px" and "updated 117px" gets logged, but that's smaller than I'd expect it to be
On a 1px window resize:
- "resize 278px" and "updated 278px" gets logged, which is the value I'd expect it to be.
