Vue.js：テンプレートに関数をバインドする

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> 

値を動的に更新する必要はありませんが、私はそれが、少なくとも一度計算されるようにしたいと思います。 現在、「h」が初期化されていないというエラーが表示されます。

Answer 1

dataプロパティは、DOMがレンダリングされる前に評価されます。 DOMがマウントされた後、そう

が

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

すなわちmounted()ライフサイクルフックの内側に、あなたの計算ロジックを実行EDIT：wimdow mounted()フック自体にサイズを変更するために

あなたはイベントリスナーを追加することができます。

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