Watch height of an element in VueJS
You can get the height with $ref.yourElement.clientHeight, after the search result returns the data. With that, you can set the height as part of your data{} section, and from there apply a watcher. Check this example
new Vue({
el: '#app',
data: {
height: 0
},
methods: {
calculateHeight() {
this.height = this.$refs.app.clientHeight;
}
}
});
You could use the ResizeObserver and integrate it into your Vue-Component
function observeHeight() {
const resizeObserver = new ResizeObserver(function() {
console.log("Size changed");
});
resizeObserver.observe(document.getElementById('yourId'));
}
function changeHeight() {
var elem = document.getElementById('yourId');
console.log('...loading data...')
setTimeout(function(){
elem.style = "height: 200px";
}, 3000);
}
observeHeight();
changeHeight();#yourId {
background-color: beige;
height: 100px;
}<div id="yourId">
</div>