[Vuejs]-Vue.js: Binding a function to Template

by

4👍

✅

data properties are evaluated before the DOM is rendered. So perform your calculation logic after the DOM is mounted , i.e inside the mounted() lifecycle hook

data(){
    h: null
},
mounted(){
       this.h = (window.innerHeight - document.getElementById('notfound-container').getBoundingClientRect().top);
}

EDIT:

You can add an event listener for wimdow resize in the mounted() hook itself:

data(){
    h: null
},
mounted(){
    window.addEventListener('resize', this.setHeight);
},
beforeDestroy(){
    //remove the resize listener
    window.removeEventListener('resize', this.setHeight);
},
methods:{
    setHeight(){
        this.h = (window.innerHeight - document.getElementById('notfound-container').getBoundingClientRect().top);
    }
}
👤Vamsi Krishna

Leave a comment