Question

我无法用文字解释这一点，但我希望将屏幕高度绑定到计算值。这里的代码不起作用，所以我想知道如何使它工作。

<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>

该值不需要动态更新，但我希望至少计算一次。目前，我收到错误＆＃34; h＆＃34;没有初始化。

Answer 1

在呈现DOM之前评估

data属性。因此，在安装DOM之后，即在mounted()生命周期钩子

内部，执行计算逻辑

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

编辑：

您可以在mounted()挂钩中为wimdow resize添加一个事件监听器：

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

Vue.js：将函数绑定到Template

1 个答案: