Vue.js: Binding a function to Template

Question

I can't really explain this in words, but I want to bind my screen height to a calculated value. The code here does not work, so I'd like to know how to make it work.

<template>
    <b-container id="notfound-container">
        <b-row align-v="center" v-bind:style="{ height : h + 'px' }">
            <b-col style="align-items:center">
                <h1>404 Error</h1>
                <p>The page you have requested does not exist.</p>
            </b-col>
        </b-row>
    </b-container>
</template>

<script>
    export default {
        name: 'tHome',
        data () {
            return {
                h: (window.innerHeight - document.getElementById('notfound-container').getBoundingClientRect().top)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
        font-weight: normal;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>

The value does not need to be dynamically updated, but I'd like it to be calculated at least once. Currently, I get the error that "h" is not initialized.

It seems strange to get that error, as it works here jsfiddle.net/943bx5px/8 maybe check if you have a div notfound-container div or something — samayo
– samayo, Commented Dec 7, 2017 at 11:17

Vamsi Krishna · Accepted Answer · 2017-12-07 11:55:47Z

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);
    }
}

edited Dec 7, 2017 at 11:55

answered Dec 7, 2017 at 11:24

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

samayo Over a year ago

+1 I didn't know this actually. Is this described in the doc or did you get that from the vue lifecycles chart?

Vamsi Krishna Over a year ago

@samayo it is explained in the API section for lifecycle hooks: vuejs.org/v2/api/#Options-Lifecycle-Hooks

Markus Appel Over a year ago

This is very good to know. How can I make it update whenever window.innerHeight changes? Or, even better, every tick?

Markus Appel Over a year ago

@VamsiKrishna that was exactly what I was looking for. Thank you so much.

Collectives™ on Stack Overflow

Vue.js: Binding a function to Template

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related